配置

安装：

npm i sass-resources-loader --save-dev

修改vue-cli的目录下build/utils.js

scss选项修改为如下选项：

return {    css: generateLoaders(),    postcss: generateLoaders(),    less: generateLoaders('less'),    sass: generateLoaders('sass', { indentedSyntax: true }),    scss: generateLoaders('sass').concat({      loader:'sass-resources-loader',      options:{        resources:path.resolve(__dirname,'../src/assets/sass/base_core.scss')      }    }),    stylus: generateLoaders('stylus'),    styl: generateLoaders('stylus')  }

个人使用习惯

我这里是指定了../src/assets/sass/base_core.scss为我的根scss文件，其他的scss文件都引入到这个scss文件中。

//  ../src/assets/sass/base_core.scss@import "./_setting.scss";@import "./_css3.scss";@import "./_mixin.scss";

./_setting.scss里放的是所有静态scss变量

$fontsize-tiny:          ptr(12px)!default;$fontsize-small:         ptr(14px)!default;

./_mixin.scss里放的是公用的混合器或者通用类

//截字//SCSS 的”%” 与 “.” 功能类似，但是不会输出代码%ellipsis-basic {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}//文字超出后以...显示 支持多行@mixin fn-ellpisis($line) {  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: $line;  overflow: hidden;}

当然，怎么归类是个人习惯问题。

这样，我仅仅在build/utils.js下引入一次，就可以在所有的vue组件中使用全局scss相关，而不再需要每个vue组件都引入一次了，当然，打包也是按需打包的，用到什么scss才会打包什么scss。

怎么使用

当然，在vue-cli中怎么配置sass环境，网上很多教程，就不必多说了。