vue项目设置全局作用域scss变量

vue-cli 2.0

使用sass-resources-loader解决Sass全局变量问题

安装 sass-resources-loader

npm install sass-resources-loader --save-dev

相关配置

找到build文件下的utils文件这个位置

将scss项改为

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader', // 为了scss全局变量能在vue文件中使用
      options: {
        resources: path.resolve(__dirname, './../src/assets/css/colorConfig.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

vue-cli 3.0

在vue.config.js里配置

css: {
    loaderOptions: {
      sass: {
        // data：`@import "~@/assets/common.scss";` v7之前使用 的是data，现在改成了prependData
        prependData: `@import "~@/assets/css/common.scss";`
      }
    }
  }

配置完成后就可以在任意vue组件使用colorConfig文件中定义scss变量了~~~