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

相关推荐
Thanks_ks11 小时前
【第 006 讲】搭建 PyCharm 开发环境:PyCharm 的下载与安装 | 初始设置与常用配置
ide·python·pycharm·开发工具·jetbrains·开发环境·集成开发环境
浮尘笔记2 天前
JetBrains差异设置被自动勾选的排查与根治实录
经验分享·程序人生·编辑器·intellij idea·phpstorm·webstorm
独隅2 天前
WebStorm macOS 安装部署与高效调优实战指南
ide·macos·webstorm
golang学习记3 天前
IDEA 2026.3 远程开发迎来重磅升级
java·ide·intellij-idea·远程开发
独隅3 天前
WebStorm Windows 版 React / Next.js 实战替换指南
javascript·windows·webstorm
别问!问就是全会4 天前
Jupyter Notebook 安装包下载|单元格分块运行,图表直接内嵌
ide·python·其他·jupyter
1024奇点5 天前
【仓颉语言入门 · 第二篇 第 22 课】
开发语言·ide·开源
techpupil5 天前
IDEA基础配置及开发基础插件
java·ide·intellij-idea
赵庆明老师5 天前
Android Studio Google源代理配置
android·ide·android studio
雪芽蓝域zzs5 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm