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

相关推荐
likerhood10 小时前
IDEA中创建和运行java项目的常见操作
java·ide·intellij-idea
程序设计实验室11 小时前
2026年AI编程工具横评:Cursor、Codex、Claude Code、Zed、Windsurf
ide
在下_诸葛12 小时前
VSCode使用指南:快捷键、设置与高级技巧
ide·vscode·编辑器
我也有在努力12 小时前
VSCode Java 开启导入未使用的包置为浅灰色/透明色效果
ide·vscode·编辑器·cursor
子歌的宏定义14 小时前
主机vscode远程链接服务器开发方法
服务器·ide·vscode
sz49723859914 小时前
VSCODE 隐藏或打开状态栏
ide·vscode·编辑器
新缸中之脑14 小时前
智能IDE是新的浏览器
ide
吠品14 小时前
IDEA告别“Command line too long”:三种高效解决方案深度解析
ide
来自内蒙古的田园蒙牛14 小时前
在 Windows 系统下,使用 PyCharm 开发工具,如何通过直接调用 API 的方式,利用你手头的 OpenAI 接口地址和 Key 来辅助代码编写
ide·windows·pycharm
摇滚侠15 小时前
VsCode 前端开发快捷语法,Emmet 快捷语法整理,markdown 表格格式
ide·vscode·编辑器