vue全局引入公共scss变量

参考原文：

• vue使用scss，并且全局引入公共scss样式变量
• vue中配置scss全局变量的步骤

1.安装sass-resources-loader

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

2.配置

• 修改build中的utils.js

// utils.js
exports.cssLoaders = function(options) {
 // ...
 return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // 配置全局变量scss
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    sass: generateLoaders('sass', { indentedSyntax: true }).concat(
      {
        loader: 'sass-resources-loader',
        options: {
        // ☆：在main.js中也要引入对应的文件 
          resources: path.resolve(__dirname, '../src/styles/common.scss')
        }
      }
    ),
    // 配置全局变量scss
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/styles/common.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

• 在main.js中也要引入对应的文件
  import '@/styles/common.scss'
• 配置完需要重新运行项目