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

相关推荐
stevenzqzq14 小时前
ctrl +B和ctrl+shift +B的区别
android·ide·android studio
深念Y19 小时前
删除IDEA中的JDK列表项
java·ide·jdk·intellij-idea·idea·sdk
安全渗透Hacker19 小时前
IDEA 中主流 API 插件对比及实操建议
java·ide·intellij-idea
不爱编程爱睡觉19 小时前
vscode下载/常用插件分享及如何链接Ubuntu
ide·vscode·ubuntu
love530love20 小时前
EPGF 新手教程 13在 PyCharm(中文版 GUI)中创建 Hatch 项目环境,并把 Hatch 做成“项目自包含”(工具本地化为必做环节)
开发语言·ide·人工智能·windows·python·pycharm·hatch
ziyue757520 小时前
idea不能使用低版本插件问题解决
java·ide·intellij-idea
环黄金线HHJX.1 天前
【MCP: Tuan编程 + Qt架构 + QoS - 量子-经典混合计算管理控制平台】
ide·人工智能·qt·编辑器·量子计算
tiandyoin1 天前
visual studio 克隆 github 时,如何保持行尾符与 github 一致
ide·github·visual studio
FL16238631291 天前
Visual Studio Installer无法启动安装程序。错误:系统找不到指定的文件。
ide·visual studio
love530love1 天前
EPGF 新手教程 11在 PyCharm(中文版 GUI)中创建 uv 环境,并把 uv 做到“项目自包含”(工具本地化为必做环节)
ide·人工智能·python·pycharm·conda·uv·epgf