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

相关推荐
哎写bug的程序员18 小时前
关于VSCode上gcc,gdb的安装配置问题
ide·vscode·编辑器
Eloudy20 小时前
全文 - Learning Exact NVIDIA SASS Encoders with [特殊字符]₂ Linear Algebra
sass·gpu
旺旺的碎冰冰~1 天前
VScode解决终端输出中文乱码问题
ide·vscode·编辑器
lpfasd1231 天前
node-sass 停止维护!老项目迁移 Dart Sass 完整教程
前端·rust·sass
devilnumber2 天前
避坑_IDEA 提取方法(Extract Method)工具
java·ide·intellij-idea
小天源2 天前
智叟云集定时采集与消息推送架构——实现可恢复的订阅通知流程
架构·sass·权限管理·多租户·服务商 api·ai采集
2501_915918413 天前
在 Xcode 中运行和调试单元测试的完整指南
ide·vscode·macos·ios·单元测试·个人开发·xcode
不爱吃鱼的蔓热莓4 天前
释放VSCode插件占用系统盘垃圾
ide·vscode·编辑器
2501_915106324 天前
iOS开发之Xcode常用调试技巧总结
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
bing_feilong4 天前
vscode: ssh Got bad result from install script
ide·vscode·ssh