vue中使用scss(sass)踩过的坑

1.首先是vue项目中使用scss,网上教程比较多也很全面,简单扒一些

    安装sass 依赖包 ,在cmd界面输入:

npminstallsass-loader--save-dev

npminstallnode-sass--sava-dev

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

{

test: /\.scss$/,

loaders: ['style','css','sass']

}

3.使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法,否则报错

---------------------------------------------------------分割线-------------------------------------------------

按照正常方法,上面这几步完成后重新npm run dev  就可以运行查,写几句scss样式就可以看到效果,但是我在使用时报错

原因主要是我们sass-loader的版本太高,导致webpack编译时出错。

解决:打开我们的package.json,修改sass-loader的版本为7.3.1

执行命令,重新安装项目依赖

$ npm install

然后,启动项目

$ npm run dev

项目启动成功,编译报错问题解决

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,884评论 1 32
  • 一、webpack和npm的关系 npm是包管理器,及可以执行命令包(webpack可以看成是功能强大的命令包,除...
    js_hcl阅读 5,539评论 1 3
  • webpack-4.x 安装 npm i webpack -g: 全局安装webapck 基本使用 不使用配置文件...
    duans_阅读 5,732评论 0 12
  • webpack使用学习 本分享学习借鉴webpack中文官网,官网链接(中文文档):https://www.web...
    腿毛怪丶叔叔阅读 4,413评论 0 5
  • 不覺一事幾時長,由來由往,只遇芬芳。 縱使少年歷游廊,自詡自狂,恐遭遺忘。 懶梳妝,尋常亦無常。 笑他強自比小秋孃...
    伊爾沁初阅读 2,481评论 1 1

友情链接更多精彩内容