vue中使用scss时报错

前天下载了个vue移动端的demo(大家也可以学习一下：https://github.com/toutouping/vue-case)，先是运行了cnpm  install ；再运行了npm  run dev  ；然后就报了下面的错误：

  对于刚进入编程领域的我来说，一看到这种报错，第一反应就是应该是scss没有安装，打开代码发现，demo里面果然用了scss的样式，并且还报红了，让我更加确定了是scss没有安装好的原因。

于是我就百度了scss的安装方式（这个安装过程就不描述了，在这个过程中我学习了sass/scss以及less的区别，在此之前只是用过less），安装完成后，在webpack.base.conf.js文件中的  中追加了对sass的配置：

 {  //手动添加这一条，相当于是编译识别sass!
    test: /\.scss$/,

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

     }

然后再npm run dev 发现问题还是没有解决，此时的我就有点蒙圈了，固执的以为就是我的scss还是没有配置好，所以我还是一直在网上找scss配置完不生效的原因，然后我就查到了原来我们现在用的vue-cli脚手架已经自动的帮我们将scss的配置写在了utils.js文件里面，不需要在webpack.base.conf.js这个文件中配置了，这时候我就怀疑是不是这个demo的vue版本过高已经将scss的配置写在了utils.js文件里面，而我又在webpack.base.conf.js这个文件中配置，导致两者冲突了，于是我就找demo中的utils.js文件，看里面是不是已经写了scss的配置（在这里我查看了我以前的代码，由于一直是在别人的框架上写代码，所以好多东西都没理解），然后我就在demo中js文件夹下找到了一个名为util.js的文件，发现里面并没有关于scss的配置，这下我就更奇怪了，抱着死扛到底的心态，我就在我之前代码的utils.js中将该部分copy到了我的demo代码中，再npm run dev 时出现了新的报错，大概就是在提示我copy进去的那部分有些地方缺少分号，有些字符串没有用双引号，，一般不会报这种错误吧！！！就在我快要放弃的时候，我还是死扛着把报错的地方都修改过来了，最后剩了一个错误：没错，还是最初的那个错误，我再细细一看，发现了下面红框的地方，提示是多了空格，我定位到提示的位置，main.js文件

 

发现了下面红框的位置好像是多了个空格，我删除多余的空格；提示我运行成功了~~~~

没想到最后是因为一个空格的原因，我将先前copy进来的部分注释掉，发现也没有报错，全局搜索（ctrl+shift+r）了scss，才发现原来是我找错文件了，不是js文件夹下的util.js  ， 而是build文件夹下的utils.js文件，里面如我所料，自定义了scss的配置

再说说我前面在页面样式中发现的报红：

是因为使用lang=‘scss’时，还写了type="text/css"的原因，去掉type="text/css"就好了

总结一下：虽然到现在也不知道为什么就因为一个空格导致了这个报错，希望知道原因的朋友能告知一下   1、遇到报错的时候一定要好好查看报错原因；2、一定要清楚了解整个项目的目录；3、处理报错不要像我一样瞎copy

希望我的这些罗里吧嗦能帮助到遇到同类问题的朋友！

 

转载于:https://www.cnblogs.com/zhangxingde/p/10141504.html