sass-resources-loader引入sass全局变量
sass-resources-loader可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。
安装依赖
npm install --save-dev sass-resources-loader
修改sass配置
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = []
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
loaders.push(MiniCssExtractPlugin.loader)
} else {
loaders.push('vue-style-loader')
}
loaders.push(cssLoader)
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
if (loader) {
// 修改这一块，当使用sass-resources时也需要引入'sass-loader'
if (loader === 'sass-resources') {
loaders.push({
loader: 'sass-loader'
})
}
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
return loaders
}
function resolveResource(name) {
return path.resolve(__dirname, '../src/styles/' + name);
}
修改sass配置的调用
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
// sass: generateLoaders('sass', {
// indentedSyntax: true
// }),
// scss: generateLoaders('sass'),
sass: generateLoaders('sass-resources', {
resources: [resolveResource('variables.scss')]
}),
scss: generateLoaders('sass-resources', {
resources: [resolveResource('variables.scss')]
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
