脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue安装使用sass方法

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

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

总结

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

您可能感兴趣的文章:

相关文章

  • Vue3配置路由ERROR in [eslint]报错问题及解决

    Vue3配置路由ERROR in [eslint]报错问题及解决

    这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue+Element实现表格单元格编辑

    Vue+Element实现表格单元格编辑

    这篇文章主要为大家详细介绍了Vue+Element实现表格单元格编辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue获取当前点击的元素并传值的实例

    vue获取当前点击的元素并传值的实例

    下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue关于组件化开发知识点详解

    Vue关于组件化开发知识点详解

    在本篇文章里，小编给大家分享的是关于Vue关于组件化开发知识点详解内容，有兴趣的朋友们可以学习下。
    2020-05-05
  • 浅谈vue中$bus的使用和涉及到的问题

    浅谈vue中$bus的使用和涉及到的问题

    这篇文章主要介绍了浅谈vue中$bus的使用和涉及到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue+Antv F2实现混合图表

    Vue+Antv F2实现混合图表

    这篇文章主要为大家详细介绍了Vue+Antv F2实现混合图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 使用mint-ui实现省市区三级联动效果的示例代码

    使用mint-ui实现省市区三级联动效果的示例代码

    下面小编就为大家分享一篇使用mint-ui实现省市区三级联动效果的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue项目netWork地址无法访问的问题及解决

    vue项目netWork地址无法访问的问题及解决

    这篇文章主要介绍了vue项目netWork地址无法访问的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue实现固定位置显示功能

    vue实现固定位置显示功能

    这篇文章主要介绍了vue实现固定位置显示功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • vue使用pdf.js预览pdf文件的方法

    vue使用pdf.js预览pdf文件的方法

    在页面进行pdf预览的时候，由于文件不能够打印和下载很难满足客户的需求，接下来通过本文给大家介绍vue使用pdf.js来进行pdf预览,需要的朋友可以参考下
    2021-12-12

最新评论