安装 SCSS

1
npm install sass-loader node-sass --save-dev

无需其他配置，vue-loader 能根据 lang 属性自动判断出要使用的 loaders。

引入全局变量

但我们在工程中定义了一些全局变量 或者 Mixin 方法，在各个需要使用的文件中都要 import 一次，需要引入的文件一旦多了起来后，就会变得十分的麻烦和难以维护，这时候我们就需要 sass-resources-loader 的拯救！

1
npm install -D sass-resources-loader

然后在 build/utils.js 文件中找到

1
2
3
4
5
6
7
8
9
return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

将其中的 scss 改为：

1
2
3
4
5
6
scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/assets/your.scss') // 填写你的 SCSS 文件路径
  }
})

done~

参考资料

如何更有效率和质量地开发 Vue 项目