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 [email protected] -S

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

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