Vue项目中 sass安装

Vue项目中 sass安装

1. sass-loader依赖于node-sass,所以要安装node-sass

cnpm install node-sass --save-dev       //安装node-sass

cnpm install sass-loader --save-dev         //安装依赖包sass-loader

cnpm install style-loader --save-dev        //安装style-loader

 

2. 在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
},

3. 在需要用到sass的地方添加lang=scss

 

注: 安装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

  

参考链接: 

vue安装node-sass编译报错 https://blog.csdn.net/ze1024/article/details/100516650

vue-cli+webpack构建vue项目和使用sass报错填坑 https://www.cnblogs.com/x-llin/p/11737906.html

预处理 Sass、LESS 和 Stylus区别总结 https://blog.csdn.net/pedrojuliet/article/details/72887490

猜你喜欢

转载自blog.csdn.net/weixin_44360943/article/details/108715992