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

相关推荐
春日见16 分钟前
vscode的AI编程插件推荐:
大数据·ide·vscode·算法·机器学习·编辑器·ai编程
lazy H2 小时前
Spring Boot 项目如何连接 Redis?新手入门配置和常见错误总结
ide·spring boot·redis·后端·学习·intellij-idea
2601_962054953 小时前
终端与IDE形态的vibe coding实测:两款AI编程工具迭代能力对比
数据库·ide·ai编程
jieshenai3 小时前
VScode sys.path,并使CTRL+左键可访问源码
ide·vscode·编辑器
qq_448011164 小时前
VSCode环境搭建
ide·vscode·编辑器
潇凝子潇6 小时前
IDEA插件
java·ide·intellij-idea
程序媛kelly6 小时前
如何打开 .md / .ipynb 文件?Markdown 与 Jupyter Notebook 本地预览全攻略
ide·python·jupyter
AndyHuang19767 小时前
【避坑指南】Visual Studio 插件报错 “Windows Terminal (wt.exe) was not found in PATH“ 完美解决
ide·windows·visual studio
向上的车轮7 小时前
Typora插件开发指南:打造专属IDE式写作环境
ide·typora插件
唯刻V8 小时前
你的IDE已经不认识你了
android·ide·android-studio·cli