Vue2.0项目中使用sass(踩坑之路)

今天用2.0创建项目的时候，使用scss一直不成功，一直报错………………
记录一下，防止下次踩坑

1、安装依赖包

vue的webpack项目中需要安装上node-sass、sass-loader和style-loader，所以，在项目中，运行一遍：

npm i node-sass sass-loader style-loader -D

运行以上的命令之后，将在package.json文件中的“devDependencies”属性中看到对应的版本号。

2、配置loader

在项目中的build目录找到webpack.base.conf.js文件，在该文件module.export中的module.rules加入解释scss文件的loader，具体做法是，在数组中加入一个对象，对象的内容如下

{test: /\.scss$/,loader: 'sass-loader!style-loader!css-loader',
}

3、指定语言为scss

在.vue文件的style标签中加 lang=“scss”，写法如下：

<style  lang="scss" scoped></style>

通过以上的步骤就可以在项目中使用sass。

emm 我按照这个步骤执行N次，仍旧报错，最终解决办法:
看看我们的package.json文件，sass-loader 下载的是最新的版本，这样是不可以的
我们指定下载版本:

 npm i sass-loader@7.3.1 -S

下载之后，重新启动项目就可以正常使用SCSS了！！

如果你还没有成功，请留言，我们一起解决

Vue2.0项目中使用sass(踩坑之路)相关推荐

ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
vue-cli3.0+webpack4中关于svg-sprite-loader踩坑，让svg组件徜徉我的web项目
第一次写文章,今天踩坑过后希望能够记录这样'生动有趣'的踩坑之旅,还是那样,在技术的海洋中,我和大佬就像鱼和水,我没了大佬就凉了,大佬没了我还清净,感谢一路栽培.公司之前的项目都是用vue-cli2. ...
在Vue2.0项目中与H5项目中获取、设置、清除cookie的一些注意点
在vue中获取cookie 原生js方法没有直接获取cookie中值的,所以我在vue的项目中我自己写了个获取cookie值的方法(还有删除与设置cookie的方法还没去写,大家一起来补充完善) &l ...
vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题
1.如何设置config中的内容 readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave: false,//自动保存功能重点:ena ...
Vue2.0史上最全入坑教程（中）—— 脚手架代码详解
2019独角兽企业重金招聘Python工程师标准>>> 书接上文我们说道,如何利用脚手架(vue-cli)构建一个vue项目,本回书我们一起来学习分析下代码. 回顾下创建后的项目目录 ...
vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式
在工作中,有次遇到要把返回的字符串分割成两部分,一部分用另外的样式显示. 这时候,我想通过对得到字符串进行处理,在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了.不 ...
Vue2.0项目安装Mint-UI - cmd篇
Vue2.0项目如何安装引入Mint-UI? 这里讲一下如何通过cmd指令安装mint-ui到vue2.0项目. 步骤说明: 和以前一样,先cd到项目根目录然后cmd:npm i mint-ui - ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...

Vue2.0项目中使用sass(踩坑之路)

1、安装依赖包

2、配置loader

3、指定语言为scss

Vue2.0项目中使用sass(踩坑之路)相关推荐

最新文章

热门文章