WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译

于 2020-05-25 14:46:58 发布
阅读量757 收藏
点赞数 1
分类专栏： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xshiyi110/article/details/106332897
版权
本文详细介绍了如何在WebStorm、PHPStorm及IntelliJ IDEA中配置scss自动编译。首先，需要安装ruby环境，然后通过ruby命令行安装sass。接着，打开IDE设置，添加File Watchers并配置scss编译器路径。要注意的是，IDE中如果没有File Watchers插件需要先下载。最后，完成设置后，确保在项目文件夹内使用，避免目录或文件名含有中文。
摘要由CSDN通过智能技术生成

安装rubu环境

下载ruby

因为sass依赖于ruby
下载地址：http://rubyinstaller.org/downloads
选择自己对应的操作系统下载

安装ruby

第二步的时候注意勾选第二项，是添加环境变量，后边都选择默认即可安装完毕。
在这里插入图片描述

安装sass

找到ruby命令行

从开始菜单中找到刚安装的ruby，点击Start Command Prompt with Ruby，打开命令行
在这里插入图片描述

安装sass

在命令行中输入以下命令，并回车

gem install sass

稍等片刻便会提示安装成功。如果不成功说明被墙了，请自行解决，反正我的正常安装了。
至此，准备工作完毕！

配置IDE

<

最低0.47元/天 解锁文章
一花一草一木一世界
关注
专栏目录
intelliJ idea设置sass自动编译
Dolores_me的博客
06-21 3639
1.首先crtl+alt+s，在Plugins组件中搜索file watchers，如果没有就点击下面按钮“Install JetBrains plugins”，搜索“file watchers”安装并重启idea。 2.如果有file watchers组件，就在tools中点击此选项，点击右侧“+”，选择scss。 program：一般是c盘，ruby文件夹，\bin\sass....
scss/sass安装 intelliJ IDEA 2021.3
zhasodhaoudhowud的博客
07-25 1350
需要提前安装一些东西为scss准备， 首先需要安装Node.Js，https://nodejs.org/en/ 其次是在marketplace安装file watcher，类似vscode的--watch。不过安装配置之后，intelliJ是自动的。 接着回到settings里tools里找到file watcher 选出scss等等，在弹出来的界面点击添加，不需要其他的操作。 在回到programming界面，alt+F12，进入到terminal，界面输入 npm install-g .
phpstorm 配置scss
星丶魂的博客
04-08 642
Arguments 参数--no-cache --sourcemap=none --update $FileName$:../dist/css/$FileNameWithoutExtension$.css --sourcemap=none 不要生成.map文件
phpstorm中实时将SCSS编译为CSS
林中路
12-08 5711
1-1、安装ruby，并在安装时勾选“add..to..PATH”一项。1-2、命令行运行：gem install sass，安装SASS模块2、打开phpstorm的设置-工具-FileWatcher3、点击右边“+”，选择“SCSS”，并配置scss.bat所在目录：确定然后你不管在哪写SCSS都会实时将CSS文件编译到scss文件所在目录了
PHPStorm 安装 SASS、SCSS + Compass
weixin_34326558的博客
04-15 187
许久没更新博客啦，这两天研究了下 SASS 和 LESS ，最终选了 SASS，因为相对比较成熟些吧，试了很多坑之后，终于成功了，下面上步骤： 1. 安装 PHPStorm 的 SASS 插件 好像是自带了该插件的，如果没有的话，就打开 setting -> plugins 自己安装一个吧，就不多说了 2. 安装 Ruby Windows...
Re:从零开始的实习生活01----webstorm和intellij idea下如何自动编译sass和scss文件
Re:从零开始的实习生活
11-10 9457
webstorm和intellij idea下配置file Watcher使其可以自动编译sass和scss文件，不需要用命令行编译sass和scss文件。
js-graphql-intellij-plugin：对WebStorm，IntelliJ IDEA和其他基于IntelliJ平台的IDE的GraphQL语言支持
02-04
GraphQL语言支持WebStorm，IntelliJ IDEA和其他基于IntelliJ平台的IDE。 功能概述 对2018年6月GraphQL规范的全面语言支持，包括类型系统定义语言（SDL） 该插件可即时发现您的本地架构。 使用自省可以轻松获取远程...
webstorm,phpstorm,intellij idea小程序代码高亮插件
02-05
使用webstorm开发小程序wxml代码高亮提示。webstorm,phpstorm,intellij idea都可使用，小程序代码高亮插件
Intellij-IDEA-F2E:Intellij IDEA PHPStorm WebStorm前端工程师指南（中文）
04-06
性能好速度快PHPStorm针对PHP也做了一些优化，并包含了WebStorm IntelliJ IDEA则通过插件形式集成上面的某些功能，并且是主力JAVA IDE，功能强，速度慢，吃内存多我目前是同时装了WebStorm和IntelliJ IDEA，反正配置...
php-sass:使用纯PHP自动将SASS编译为CSS。 没有使用Ruby。 一行代码。 当前使用最新的SCSS 3.2语法，导入和混合。 指南针也可以使用
05-02
PHP的萨斯 从SASS到CSS的自动编译（在开发过程中，您一定不会在生产中这样做）。 每次运行应用程序时（例如，打入index.php），php-sass都会自动将scss文件夹中的所有.scss文件编译为css文件夹中的.css文件。 支持SASS（scss语法）和mixins的3.2版本功能。 繁荣！ 您也可以使用Compass，但是您会手动将旧版本的Compass文件（因为最新的Compass适用于SASS 3.3，而不是3.2）添加到您的scss文件夹中。 安装及使用 在项目的composer.json中，添加这些依赖项。 如果您不使用Composer，请走到角落，为自己感到非常羞愧。 然后，在那里站了2-3个小时之后，观看一些有关如何使用Composer的教程，这些教程现在非常简单，并且是PHP开发中常见的最低标准。 请注意，这是一个require-dev ，不是正常的req
scssphp：用PHP编写的SCSS编译器
02-05
脚本 scssphp是用PHP编写的SCSS编译器。 请查看主页 ，以获取有关使用方法的说明。 运行测试 scssphp使用进行测试。 从根目录运行以下命令以运行每个测试： vendor/bin/phpunit tests tests/目录中有几个测试： ApiTest.php包含各种测试PHP接口的单元测试。 ExceptionTest.php包含用于测试解析器和编译器引发的ExceptionTest.php单元测试。 FailingTest.php包含Github问题中报告的测试，这些测试证明了兼容性错误。 InputTest.php编译每.scss文件中的tests/in
idea sass scss配置
weixin_30702887的博客
12-16 511
1.安装Ruby 　　win 直接http://rj.baidu.com/soft/detail/22711.html?ald 　　mac linux 　　https://ruby.taobao.org/ 可下载 　　。。ruby -v 看Ruby版本 如果是win7的话要 重启下 path 环境变量改了但是还没有系统还没变掉 所以gem -v 无效 2.通...
phpstorm配置scss
u010914880的博客
10-30 621
#全局安装 npm install sass -g #配置phpstorm setting->Tools->File watchers->+ scss # 去掉全局转换 只对当前的文件转换 Advanced Options->前面两个去掉勾
PHPStorm 安装配置SCSS
ahyouyou520的专栏
05-07 1831
1，下载安装Ruby，官方网址：https://rubyinstaller.org/downloads/。选择符合自己的系统的版本就行。2，下载完成后双击打开安装，默认一直点击下一步就行。安装完毕后，找到ruby安装目录：\Ruby22-x64\bin，找到其中的“gem.bat”或者“gem.cmd”文件，双击运行。 如果运行成功，会有类似命令提示框的一闪而过，不用管它。3，运行cmd，打开命令...
关于webStorm设置less自动编译css和sourcemap问题
zhanyouxin的博客
12-13 3544
前两天项目页面迭代版本，接手同事的页面（据说是经了三人的手...），css中内容已经惨不忍睹，忍着痛苦算是完成了css效果。痛定思痛，以后写代码一定要用less，维护起来不会这么惨。问一个朋友，他是用考拉进行自动编译，本人比较懒，不想使用那么多工具，于是百度了一下关于webStorm的自动编译less文件，还真有，但是在less文件下创建的css和map，于是又查阅怎么能创建到根目录下的css文件
IDEA scss引入以及运用
wm1147967436的博客
04-03 4138
IDEA scss引入以及运用 1. 安装ruby（群里–安装包目录） ruby下载地址：https://rubyinstaller.org/downloads/ 1.1 检查是否安装成功：命令行输入ruby -v图片: 2. 安装compass 2.1 命令行输入：gem install compass compass -v检查是否安装成功 3. 安装normalize 3.1 命令...
如何编译 scss 源文件输出 css 到父文件夹中: webStorm phpStorm IDEA
学习笔记
11-11 697
如何编译 scss 源文件输出 css 到父文件夹中: webStorm phpStorm IDEA 看该问题必备基础知识： 知道 css 和 scss 的关系 会用 webstorm phpstorm idea 任一一款软件中的 File Watcher 插件 电脑已经安装并可执行 sass 可执行文件，能进行 scss 到 css 的编译 如果不了解，请移步这里： scss日常用法：入门 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值