<我的学习日记>
一、下载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安装成功。
四、
- 在vscode拓展商店中安装 easy sass,安装成功后要重新加载生效,所以关掉软件再打开。(存疑,不确定是否有这个必要,但是我每次都这样做)
- 点击 文件 → 首选项 →设置→点击“工作区”,如下
点击右上角第一个小图标,打开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.csdn.net/GuoQF_1102/article/details/82147594?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task