1.安装scss
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass复制代码
2.安装sass-resources-loader
npm install --save-dev sass-resources-loader复制代码
3.修改配置
在 build 文件夹下找到 util.js
修改sass编译器loader的配置,直接把下面的代码复制进去
function resolveResouce(name) {
return path.resolve(__dirname, '../src/assets/css/' + name);//更换为自己的路径
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
// 'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// 换为自己的scss文件名
resources: [resolveResouce('style.scss')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}复制代码
将默认的sass配置改为 generateSassResourceLoader()
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}复制代码
此时重启服务就可以使用了!
注意:
1.scss文件的引入路径一定要写正确!!!
2.复制generateSassResourceLoader和resolveResource这两个函数的时候,一定要放在exports.cssLoaders里面 不然会找不到cssLoader
转载于:https://juejin.im/post/5d0345996fb9a07f0c467e86