在webstorm中配置sass编译环境

1.下载ruby

下载地址:ruby下载

2.安装ruby

下载之后,有一个exe安装包

双击exe文件 ,并选择自己的安装位置(这个位置一定要记得,需要在webstorm中使用)。其他的步骤默认安装即可。

3.安装sass

ruby安装成功后,打开cmd命令行,输入 gem install sass ,回车后进行安装步骤(一定要保证网络稳定,不然可能安装失败)。

安装成功后会在末尾显示:5 gems installed。然后输入 sass -v 查看版本号,如果有版本号则表示安装成功,如果没有则表示没成功,则需要重新安装。

**打开ruby 安装路径的文件夹,在bin文件可以看到sass.bat和scss.bat文件。**这个文件很重要,需要在webstorm中配置

4. 在webstorm中配置sass环境

以上ruby和sass都安装成功之后,就开始配置webstorm。

这样就配置好了。

5. 测试

在webstorm中建立文件scss文件测试。

注意: 这里文件名后缀是scss噢,不要写成sass了

建立之后会自动生成.css文件和css.map文件即可,里面的写的sass样式会转为css样式。

在html界面引用的时候还是引用css后缀的文件。

备注:

原文:在webstorm中配置sass的开发编译环境_webstorm编译sass-CSDN博客

相关推荐
Java小白中的菜鸟2 小时前
创建自己的obsidian模版
ide
CreativeDev2 小时前
Sass (Scss) 与 Less 的区别与选择
less·sass·scss
Peter·Pan爱编程6 小时前
第六篇:VS Code + Continue 插件:开源爱好者的低成本高自由度方案
ide·开源·ai编程
Thanks_ks8 小时前
【第 002 讲】Python 标准开发环境搭建:运行环境 | 环境变量 | IDE 部署 | 配置优化
ide·python·pycharm·开发工具·环境配置·环境变量·编程基础
白云LDC16 小时前
Android Studio新建Vecter asset一直显示Loading icons(转圈圈)的解决办法
android·ide·android studio
An_s17 小时前
编辑器AI工具(vscode+claude)
ide·vscode·编辑器
secondyoung1 天前
VSCode设置显示空白字符
ide·vscode·编辑器
迷路爸爸1801 天前
VSCode / Cursor 中 LaTeX Workshop 的 settings.json 配置:编译与 SyncTeX 跳转
ide·vscode·json·latex
Lhan.zzZ2 天前
笔记_2026.4.28_004
c++·ide·笔记·qt
一帘忧梦2 天前
vscode 搭建stm32开发环境 +HAL 库
ide·vscode·编辑器