在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博客

相关推荐
界面开发小八哥2 小时前
「Java EE开发指南」如何用MyEclipse创建一个WEB项目?(三)
java·ide·java-ee·myeclipse
花花鱼2 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
不知所云,14 小时前
3. lvgl 9.3 vscode 模拟环境搭建 lv_port_pc_vscode-release-v9.3
ide·vscode·编辑器·c·sdl·lvgl vscode·lvgl模拟器
Percep_gan17 小时前
idea的使用小技巧,个人向
java·ide·intellij-idea
万千思绪1 天前
【PyCharm 2025.1.2配置debug】
ide·python·pycharm
编程乐学1 天前
网络资源模板--基于Android Studio 实现的极简天气App
android·ide·android studio·大作业·移动端开发·天气预报·极简天气
不想迷路的小男孩1 天前
Android Studio 中Palette跟Component Tree面板消失怎么恢复正常
android·ide·android studio
AlickLbc1 天前
在phpstudy环境下配置搭建XDEBUG配合PHPSTORM的调试环境
ide·phpstorm
悠悠小茉莉1 天前
Win11 安装 Visual Studio(保姆教程 - 更新至2025.07)
c++·ide·vscode·python·visualstudio·visual studio
SZ1701102311 天前
华为云 银河麒麟 vscode远程连接
ide·vscode·华为云