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

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

1、安装依赖包

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

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

  

 

  
1
 

运行以上的命令之后，将在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',
}

  

 

  
1
  
2
  
3
  
4
 

3、指定语言为scss

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

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

  

 

  
1
  
2
  
3
 

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

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

 npm i sass-loader@7.3.1 -S

  

 

  
1
 

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

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

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/108584646