WebStorm配置Sass实现自动编译

已于 2023-04-26 17:40:04 修改
阅读量249 收藏
点赞数 1
分类专栏： Win搭建开发环境 文章标签： webstorm sass css
于 2023-04-26 17:38:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHI940637335/article/details/130389800
版权

一、Ruby安装

1.下载与安装

https://rubyinstaller.org/downloads/

在这里插入图片描述

安装一路下一步即可，默认勾选的框勾选即可，不要更改

2.检测

ruby -v

在这里插入图片描述

3.更改Ruby源

3.1查看已经安装的source源

gem sources -l

在这里插入图片描述

3.2更换国内的源

gem sources --add https://gems.ruby-china.com/  --remove https://rubygems.org/

在这里插入图片描述

二、Sass安装

gem install sass

在这里插入图片描述

gem install compass

在这里插入图片描述

sass -v

compass -v

在这里插入图片描述

三、WebStrom配置Sass

在这里插入图片描述在这里插入图片描述

$FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

在这里插入图片描述
在这里插入图片描述

史小创
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webstorm配置支持nodejs并自动补全的方法
10-18
今天小编就为大家分享一篇webstorm配置支持nodejs并自动补全的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
WebStorm中配置scss编译环境
IshidaYoshiyama的博客
10-03 497
不用Ruby，也不用node-sass，更不要autoprefixer和postcss-cli，只要装了node你就能像vs中一样高效的在webstorm中自动监听并编译scss文件。
SASS/SCSS安装与webstorm的SASS/SCSS的环境配置
lspdd的博客
10-03 1396
sass的安装 Ruby环境 sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!） window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统 安装完成后需测试安装有没有成功,运行CMD输入以下命令 ruby -v //如安装成功会打印 ruby 2.6.4p104 (2019-08-28 revision 67798) [x64
npm及webstrom(自动)编译scss全攻略(输出路径)
zoro的博客
08-24 1126
1. Ruby安装 SCSS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SCSS。 推荐使用https://rubyinstaller.org/downloads/上下载的Windows一键安装包:) 安装包路径（64位）： https://dl.bintray.com/oneclick/rubyinstaller/rubyinstall...
webstorm中 scss或sass配置自动编译
子燕若水的博客
09-04 463
在webstorm中配置sass编译环境
最新发布
【爱打盹的喵】的专栏
11-15 1228
建立之后会自动生成.css文件和css.map文件即可，里面的写的sass样式会转为css样式。以上ruby和sass都安装成功之后，就开始配置webstorm。查看版本号，如果有版本号则表示安装成功，如果没有则表示没成功，则需要重新安装。安装成功后会在末尾显示：5 gems installed。，回车后进行安装步骤（一定要保证网络稳定，不然可能安装失败）。在webstorm中建立文件scss文件测试。在html界面引用的时候还是引用css后缀的文件。ruby安装成功后，打开cmd命令行，输入。
WebStorm配置Sass
Aelous_dp的博客
07-19 1847
最近有些软件重装了一下，很多插件配置都需要再来一次，发现有些之前的配置问题还是会遇到，就做一些总结，方便自己也方便大家。 我个人比较喜欢 JetBrains 的 IDE，用起来蛮舒服，很省心的感觉。 本文主要将 WebStorm 下配置 Sass，以及 Sass 的自动编译。 Sass 什么是 Sass，我引用官网的一句话 Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样
webstorm配置scss、typescript等自动编译方式
weixin_42129248的博客
10-09 1061
配置westrom实时编译scss、typescript
WebStorm自动编译less
袁竹茜
06-15 7625
WebStorm自动编译less 安装node.js和npm windows下安装node.js去Node.js官网下载安装包，手动安装。安装node.js的同时会自动安装npm。 安装程序会自动配置环境变量，所以如果要验证node.js和npm是否安装成功，只需要在cmd命令行下输入node -v npm -v即可。 提示以上字样时，node.js和npm已安装成功。2.使用node来安装le
1.2 webstorm设置pug自动编译
LetsStudy的博客
06-18 580
一、File->Setting->Tools选择File Watchers
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
12-11
一、语法支持设置 Preferences > Languages & Frameworks > JavaScript 二、Babel安装 1、全局安装 npm install -g babel-cli 2、当前项目，适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三、Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 babel example.js --out-file compiled.js # 或者 babe
vue: WebStorm设置快速编译运行的方法
10-17
今天小编就为大家分享一篇vue: WebStorm设置快速编译运行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
7_webstorm配置mongodb1
08-08
7_webstorm配置mongodb1
TypeScript的安装、使用、自动编译的实现
11-20
一、什么是TypeScript? 1、TypeScript是一种由微软开发的开源、跨平台的...TypeScript是为大型应用的开发而设计，最终会编译为JavaScript代码。 3、最新的Vue、React也可以集成TypeScript，而且谷歌也在大力支持TypeSc
解决webstorm中ts自动编译
小野喵的博客哦
12-10 1566
但是当我们改变ts内容时，js内容不会对应改变，每次写完ts代码，都需要手动执行命令来编译ts代码。其实在新版的idea中可以很方便的配置自动编译ts。测试一下，修改一下ts里面的内容，然后直接运行js文件，可以看到已经成功了。然后在终端执行tsc helloworld.ts来编译为js代码。下面运行代码，使用node helloworld.js来运行。找到ts的配置，勾选下面配置即可。我们可以首先写一段ts代码。
【file watchers小工具】webstorm配置scss/sass自动转换成css代码及scss的使用命令
weixin_43343144的博客
10-29 1078
​​​​​​webstorm配置scss/sass自动转换成css代码及scss的使用命令_艾小逗-CSDN博客 使用Sass命令执行输出css文件【参数请查看官网】 安装Sass | Sass中文网
Webstorm9配置SASS编译环境
weixin_30751947的博客
12-03 182
最近在学习SASS，研究了下编译的方法，现在大家一般用的有两种，一种是直接用命令行编译，另一种就是利用一些方便的编译工具，例如腾讯的koala。后来我发现，原来webstorm早就支持了sass编译 - - 真是贴心啊。。。。 废话不多说，直接去webstorm配置去。 打开settings，可以看到Tools下面有个file watchers选项，点进去如下图 右边显示的就...
在webstorm中配置sass的开发编译环境
first_shun的博客
06-30 326
sass作为世界上最稳定，最强大，最成熟(zui diao)的css扩展语言，有着其他css扩展语言无法代替的地位，所以sass编译环境的搭建配置就显得很重要了，我们就讲讲在webstorm中配置sass的编译环境。 1、安装ruby，sass是基于ruby语言开发的，所以安装配置sass之前一定要先安装ruby； (1)下载ruby，在http://www.ruby-lang...
Webstorm配置Sass,Scss
热门推荐
fengmin_w的博客
07-05 1万+
1. 前提条件：    电脑已经完成Ruby，Sass，Compass的安装 。 2.配置       打开webstorm ---- settings ---- Tools ---- files Watchers  ---- 点击加号，选择scss / sass    然后按照下图进行操作：    1、Program :        Ruby安装目录下 ---- bin ---- scss.b...
webstorm sass
08-13
7. 保存你的 Sass 文件，WebStorm 将自动编译并生成对应的 CSS 文件。 这样，你就可以在 WebStorm 中方便地使用 Sass 来编写和管理你的样式表了。希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值