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

相关推荐
Zhen (Evan) Wang14 分钟前
更改visual studio 2022 默认NuGet包路径
ide·visual studio
Tipriest_3 小时前
vscode settings(二):文件资源管理器&编辑功能&主题&快捷键
ide·vscode·编辑器
enyp805 小时前
*PyCharm 安装教程
ide·python·pycharm
m0_748238276 小时前
项目升级Sass版本或升级Element Plus版本遇到的问题
前端·rust·sass
Hylan_J12 小时前
【VSCode】MicroPython环境配置
ide·vscode·python·编辑器
mcusun200017 小时前
VScode 使用Deepseek又方便又好用的另一款插件
ide·vscode·编辑器·deepseek
HealthScience20 小时前
【异常错误】pycharm debug view变量的时候显示不全,中间会以...显示
ide·python·pycharm
TTc_1 天前
记录首次安装远古时代所需的运行环境成功npm install --save-dev node-sass
前端·npm·sass
waicsdn_haha1 天前
Visual Studio Code 2025 安装与高效配置教程
c语言·ide·windows·vscode·微软·编辑器·win7
树欲静而风不止慢一点吧1 天前
Visual Studio 2022配置网址参考
ide·visual studio