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

相关推荐
gongzhxu4 小时前
JetBrains IDEA开发环境搭建
java·ide·intellij-idea
独隅5 小时前
DevEco Code Plan+Build 双 Agent 协同开发实效解析
ide·华为
郝亚军19 小时前
webstorm如何创建vue 3.js
javascript·vue.js·webstorm
ITmaster07311 天前
告别 IDE?Android CLI 来了,开发进入 AI Agent 时代
android·ide·人工智能
jiang_changsheng1 天前
详细教程__--PyCharm Terminal--切conda环境详解
ide·pycharm·conda
放学校门口见3 天前
vscode部署stm32开发调试环境
ide·vscode·stm32
独隅3 天前
DevEco Code 在 Windows/MacOS 双系统上的完整使用指南
ide·人工智能·windows·macos·华为·harmonyos
2501_916008894 天前
iOS应用开发工具全面解析:如何选择与优化开发效率
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
梦想的颜色4 天前
2026 VibeCoding 工具链精选|IDE + 大模型成套组合推荐,按场景分级收录
ide·trae·ai 编程·vibecoding·国产海外 ai 编程方案·氛围编程成套配置·副业 ai 开发工具栈
卖买买卖5 天前
美业收银系统对比分析:系统架构、功能深度与服务模型评估
架构·sass