vue项目之bug无处不在（二）sass和scss

在修改bug的路上，越走越远~~~~
在将CSS转换为sass的过程中，又出现了bug！！

一、安装ruby和sass

大家都知道，先安装Ruby，然后命令行安装sass：gem install sass
为了以防万一，请检查一下安装是否成功：

ruby -v
sass -v

如果两个命令行都成出现对应软件的版本号，恭喜你走出了第一步！

二、在vscode中安装依赖

1、npm一些命令行

npm install [modulename] -s // 相当于 npm install --save [modulename],安装模块的时候将其写入package.json文件中

npm install [modulename] -d // 相当于npm install --save-dev [modulename],也是安装模块的时候将其写入package.json中

那么，区别是什么呢？

• Dependencies和dev

  Dependencies 一词的中文意思是依赖和附属的意思，而 dev 则是 develop（开发）的简写。

  在 package.json 文件里面，使用 --save-dev 安装的插件，被写入到 devDependencies 域里面去，而使用--save安装的插件，则是被写入到 dependencies 域里面去。

• package.json文件里面的 devDependencies和dependencies对象

  devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

  例如，我们开发的一个项目依赖于 jQuery，没有这个包的依赖，项目运行就会报错，这时候就把这个依赖写入dependencies ；

  而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies。

• 开发环境和生产环境
  通俗一点：
  开发环境：编码开发阶段，打开全部错误报告
  生产环境：上线阶段，关闭错误报告，打开错误日志

2、正式安装依赖

cnpm install sass-loader -s
cnpm install node-sass -s

安装完成之后，建议去package.json里面检索一下是否安装成功。

3、css转sass的bug

• 转换的结果

• 报错

• 排查

好吧，语法错误。
sass语法中是没有大括号和分号的，scss的语法才有。但是，我看着sass着实奇怪，所以改成了scss语法。

之后就没再报错啦！

感谢博主讲解的关于-s和-d的区别：https://blog.csdn.net/wangguo...