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

时间:2024-03-22 13:57:32

<我的学习日记>
一、下载ruby
去ruby官网下载安装后,打开cmd,运行**ruby -v后显示其版本号,则表示安装成功。 vscode里初次使用scss,将scss自动转成css
二、更换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/语句来添加淘宝源,报错,找了好久终于发现了原因,如下)
vscode里初次使用scss,将scss自动转成css
3.运行
gem sources -l
若显示
vscode里初次使用scss,将scss自动转成css
则表示替换成功
三、安装sass
cmd中运行
gem install sass
运行后显示类似下图的东西应该就是安装成功了

vscode里初次使用scss,将scss自动转成css
然后运行sass -v查看其版本,确保sass成功安装。(特别注意! 我看了很多教程这一步都是直接说运行这个语句,但是我在cmd中运行这个语句是无法识别的,需要到ruby下面去运行,如下)
vscode里初次使用scss,将scss自动转成css
打开它,运行sass -v显示如下,则表示sass安装成功。
vscode里初次使用scss,将scss自动转成css
四、

  1. 在vscode拓展商店中安装 easy sass,安装成功后要重新加载生效,所以关掉软件再打开。(存疑,不确定是否有这个必要,但是我每次都这样做)
  2. 点击 文件 → 首选项 →设置→点击“工作区”,如下
    vscode里初次使用scss,将scss自动转成css
    点击右上角第一个小图标,打开json,将粘如以下代码:
    / Easy Sass 插件 /
    “easysass.formats”: [
    {
    “format”: “compressed”, // 压缩
    “extension”: “.css”
    }
    ],
    “easysass.targetDir”: “” // 自定义css输出文件路径 当前目录下

    如下图所示:
    vscode里初次使用scss,将scss自动转成css
    到此,sass安装结束。
    五、其他
    1.创建scss文件编辑后保存会自动生成一个同名的css文件,在HTML文件中导入的文件后缀就是css
    vscode里初次使用scss,将scss自动转成css
    vscode里初次使用scss,将scss自动转成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