大家好!我叫戴向天
QQ群:602504799
如若有不理解的,可加QQ群进行咨询了解
-
sass-loader依赖于node-sass,所以要安装node-sass
npm install node-sass --save-dev //安装node-sass
npm install sass-loader --save-dev //安装依赖包sass-loader
npm install style-loader --save-dev //安装style-loader
npm install sass-resources-loader --save-dev // sass变量引入全局
在项目build文件夹里找到utils.js ,定位到下边代码
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(‘less’),
sass: generateLoaders(‘sass’, { indentedSyntax: true }),
scss: generateLoaders(‘sass’),
stylus: generateLoaders(‘stylus’),
styl: generateLoaders(‘stylus’)
}
把上面这句scss: generateLoaders(‘sass’),改成如下
scss: generateLoaders(‘sass’).concat(
{
loader: ‘sass-resources-loader’,
options: {
// **************************************************************************************************
resources: path.resolve(__dirname, ‘…/src/assets/css/all.scss’) //这里按照你的文件路径填写******
// **************************************************************************************************
}
}
) -
在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置
{
test: /.sass$/,
loaders: [‘style’, ‘css’, ‘sass’]
}, -
在需要用到sass的地方添加lang=scss
切记是scss不是sass*
编辑sass样式表的时候,后缀名是scss不是sass
注: 安装sass 出现问题 运行npm run dev 报错!
Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
这是因为当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行,下面说一下修改方法,很简单,如下,找到package.json文件,里面的 "sass-loader"的版本更换掉 就行了。
解决方法:
将 “sass-loader”: “^8.0.0”,更换成了 “sass-loader”: “^7.3.1”,
也可以先卸载当前版本,然后安装指定的版本
卸载当前版本 npm uninstall sass-loader
安装 npm install [email protected] --save-dev
Error:Node Sass version 5.0.0 is incompatible with ^4.0.0 问题解决
//卸载 node-sass
npm uninstall node-sass
//然后安装最新版本(5.0之前)
npm install [email protected]