vuecli3 引入全局scss变量_vue-cli中配置全局sass变量

配置

安装：

sass-resources-loader

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";

@