在我们很多项目（Vue）中，CSS使用很多时候都会采用SCSS预处理器等，项目经常有全局变量。比如，网站基本色调，公共函数等。但是本身sass没有统一加载全局变量的入口。难道写在App.vue里的<style></style>作为入口，是不行滴。

每个.vue里@import?

大多数情况很多同事选择这种方法，但是心想：每次需要全局变量的时候都要引入@import 'global.css'?这样c重复性的工作是多累。

1
2
3
4
5
6
7

<style lang="scss">
import 'global.scss';
...
</style>

<template lang="html">
</template>

sass-resources-loader

sass-resources-loader工具好处就是，在webpack里修改配置入口，之后就能在每个地方使用，而不需要@import。可谓大大解放生产力。
以vue-cli生成的模板（scss文件放在/src/style）为例子：

1. 找到 build/utils.js
2. 找到这段函数返回值：

   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') }

然后修改，sass/scss字段的值，
比如，针对scss,

1
2
3
4
5
6

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/style/global.scss')
  }
}),

nuxt-sass-resources-loader

在nuxt工程里，推荐使用与nuxt集成的nuxt-sass-resources-loader工具，这就不用配置了直接，在nuxt.config.js里修改，比如：

1
2
3
4
5

modules.exports={
  modules: [
    ['nuxt-sass-resources-loader', '@/assets/mixins/global.scss']
  ]
}

modules这个对象就是写在外层即可，而不是写在build里面。详细见官方文档