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

更新时间：2023年05月20日 09:08:26 作者：熬夜的卡多希

这篇文章主要介绍了在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文件时报以下的错

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

总结

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

您可能感兴趣的文章:

vue+element实现图片上传及裁剪功能
这篇文章主要为大家详细介绍了vue+element实现图片上传及裁剪功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
详解vue组件之间相互传值的方式
这篇文章主要介绍了vue组件之间相互传值的方式，对vue感兴趣的同学，可以参考下
2021-05-05
vue.config.js中配置分包策略及常见的配置选项
在Vue.js中分包（Code Splitting）是一种将应用程序代码拆分为不同的块或包的技术,从而在需要时按需加载这些包,下面这篇文章主要给大家介绍了关于vue.config.js中配置分包策略及常见的配置选项的相关资料,需要的朋友可以参考下
2024-02-02
使用Vue3生成二维码和条形码详细图文教程
在Vue项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下
2024-09-09
vue el-pagination分页查询封装的示例代码
本文主要介绍了vue el-pagination分页查询封装的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
深入理解Vue3 computed
本文主要介绍了Vue3 computed的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-08-08
Vue3实现markdown-it支持chartjs、Echartjs、mermaid的渲染(附实例代码)
markdown-it-vue使用markdown-it作为Markdown数据解析引擎,整合多种markdown-it插件,并内置了一些自己的功能性插件,这篇文章主要介绍了Vue3实现markdown-it支持chartjs、Echartjs、mermaid渲染的相关资料,需要的朋友可以参考下
2025-08-08
vue 2.0项目中如何引入element-ui详解
element-ui是一个比较完善的UI库,但是使用它需要有一点vue的基础，下面这篇文章主要给大家介绍了关于在vue 2.0项目中如何引入element-ui的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
Vue 组件事件触发和监听实现源码解析
这篇文章主要为大家介绍了Vue 组件事件触发和监听实现源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
vue3+vite+ts使用require.context问题
这篇文章主要介绍了vue3+vite+ts使用require.context问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05