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

相关推荐
小蕾Java7 小时前
PyCharm 软件使用各种问题 ,解决教程
ide·python·pycharm
周杰伦_Jay13 小时前
【Git操作详解】Git进行版本控制与管理,包括分支,提交,合并,标签、远程仓库查看
大数据·ide·git·科技·分类·github
小二·14 小时前
mac下解压jar包
ide·python·pycharm
YoungHong199219 小时前
一行配置解决claude code 2.0版本更新后 vscode 插件需要登录的问题
ide·vscode·编辑器
Blue桃之夭夭19 小时前
git和VScode
ide·git·vscode
shimly1234561 天前
vscode 指定连接其它版本的 linux
ide·vscode·编辑器
苏苏码不动了2 天前
Android Studio 虚拟机启动失败/没反应,排查原因。提供一种排查方式。
android·ide·android studio
Yield & Allure2 天前
IDEA在plugins里搜不到mybatisx插件的解决方法
java·ide·intellij-idea
孤独斗士2 天前
解决Intellij IDEA控制台,logger.info(),system.out.println()等中文乱码问题
java·ide·intellij-idea
偷光2 天前
浏览器中的隐藏IDE: Console (控制台) 面板
开发语言·前端·ide·php