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

vue安装使用sass的方法 1 脚手架安装vue项目 npm install -g vue-cli 2 安装项目依赖 npm install 3 运行

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文件时报以下的错

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持好代码网。

您可能有感兴趣的文章
vue-element-admin中node-sass换成dart-sass,安装依赖报code 128多种问题的如何解决方法

大前端代码重构之事件拦截iOS Flutter Vue示例分析

详解vue样式穿透的几种方式

vue项目中安装less依赖的过程

Vue3 重构函数透传示例解析