vscode里初次使用scss，将scss自动转成css

<我的学习日记>
一、下载ruby
去ruby官网下载安装后，打开cmd，运行**ruby -v后显示其版本号，则表示安装成功。
二、更换gem源
1.在cmd下运行
gem sources --remove https://rubygems.org/
进行删除
2. 运行
gem sources -a https://gems.ruby-china.com/
来添加国内淘宝源（注意：此前运行gem sources -a https://gems.ruby-china.org/语句来添加淘宝源，报错，找了好久终于发现了原因，如下）

3.运行
gem sources -l
若显示

则表示替换成功
三、安装sass
cmd中运行
gem install sass
运行后显示类似下图的东西应该就是安装成功了

然后运行sass -v查看其版本，确保sass成功安装。（特别注意！ 我看了很多教程这一步都是直接说运行这个语句，但是我在cmd中运行这个语句是无法识别的，需要到ruby下面去运行，如下）

打开它，运行sass -v显示如下，则表示sass安装成功。

四、

1. 在vscode拓展商店中安装 easy sass，安装成功后要重新加载生效，所以关掉软件再打开。（存疑，不确定是否有这个必要，但是我每次都这样做）
2. 点击 文件 → 首选项 →设置→点击“工作区”，如下
   
   点击右上角第一个小图标，打开json，将粘如以下代码：
   / Easy Sass 插件 /
   “easysass.formats”: [
   {
   “format”: “compressed”, // 压缩
   “extension”: “.css”
   }
   ],
   “easysass.targetDir”: “” // 自定义css输出文件路径 当前目录下
   如下图所示：
   
   到此，sass安装结束。
   五、其他
   1.创建scss文件编辑后保存会自动生成一个同名的css文件，在HTML文件中导入的文件后缀就是css
   
   
   2.我在安装sass以及完成其他配置之前已经写好scss文件，这些工作完成后再运行html文件还是发现没有成功导入scss里面的样式，尝试自己建一个同名的css文件也失败了。
   后面重新建scss文件保存后自动生成css文件， 成功运行。
   所以！ 如果你和我一样安装配置好之后还是没运行成功，尝试一下删掉重建。

六、参考
https://zhuanlan.zhihu.com/p/51039055

https://blog.youkuaiyun.com/GuoQF_1102/article/details/82147594?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task