在vue中安装使用sass的实现方法

vue安装使用sass的方法

1.脚手架安装vue项目

npm install -g vue-cli    

2.安装项目依赖

npm install

3.运行项目

npm run dev

4.安装sass依赖

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

安装完成如图所示：

5.在页面中使用

6.如果页面中的文字变成红色，说明已经成功配置好sass了

vue安装使用sass的注意事项

首先是安装依赖

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

但是在安装2个之后可能会出现报错

原因: 上面说是因为sass-loader的版本过高导致，因其最新版本为8.0.0，此会导致编译出错

解决方法

• 将package.json中的sass-loader的配置修改成低于8.0.0版本，我按照上述链接中的版本，修改成7.3.1
• 将安装的node_modules项目依赖删除，重新安装，将sass-loader版本变成7.3.1
• 重新运行项目 npm run dev
• 问题解决，并不会报错

1、卸载之前安装的版本

例如运行：

npm uninstall sass-loader

2、重新安装指定的sass-loader版本

npm install sass-loader@7.3.1

3、如果还是安装不成功的话，或者安装太慢连接不上，使用一下淘宝镜像后重复1,2步骤，成功后再npm install

使用淘宝镜像：npm config set registry https://registry.npm.taobao.org

然后再执行命令

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

第二步：切记不需要在webpack.base.config.js中去配置了loader了， 主要原因是新版本的vue-cli已经帮我们把sass-loader配置好了，放在了util.js里面。 一旦配置将会在main.js里引用scss文件时报以下的错

最后就成功运行了可以在页面中进行使用了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。