526互联

记录一下vue如果全局引入scss变量

发布时间 2023-11-27 17:21:35作者: ajajaz

开始

首先一些普通的css，可以在App.vue中引入
image

然后项目中会经常用到一些功能型的scss，比如mixin，和函数等，这个时候在main.js 和app.vue 是无效的。

首先查看自己的 sass和sass-loader版本，注意sass-loader的安装版本,如果是v8的版本使用prependDatea,以上的版本使用additionalData(翻译:额外的)的配置项

先创建variables.scss文件
image

在vue.config.js配置文件中添加如下代码：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  //使用es6相关的依赖
  transpileDependencies: true,
   // 关闭检查代码格式
   lintOnSave: true,
   chainWebpack: config => {
    // eslint-disable-next-line no-unused-expressions
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set('_views', path.join(__dirname, 'src/views'))
      .set('_components', path.join(__dirname, 'src/components'))
      .set('_api', path.join(__dirname, 'src/api'))
      .set('_utils', path.join(__dirname, 'src/utils'))
      .set('_style', path.join(__dirname, 'src/style'))
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @import "@/style/common.scss";
        @import '@/style/class.scss';
        @import '@/style/variable.scss';
        `,
      },
    },
  }
})

 css: {
    loaderOptions: {
      scss: {
        // 如果版本较低请使用prependDatea
        additionalData: `
        @import '@/style/variable.scss';
        `,
      },
    },
  }

配置好后，就可以在各个组件中使用了！