webstorm监听scss文件生成.css文件、监听.css文件生成.min.css文件

最新推荐文章于 2024-04-11 09:43:01 发布
最新推荐文章于 2024-04-11 09:43:01 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyxyldd/article/details/91415691
版权
本文介绍了如何在WebStorm中设置监听SCSS文件以生成.css文件，以及监听.css文件生成.min.css文件。通过调整File Watchers设置，可以使用Ruby的sass.bat工具并设置不同参数来实现压缩或无压缩样式文件的生成。同时，还讲解了监听CSS和JS文件以生成压缩文件的方法，使用YUI Compressor工具完成这一过程。
摘要由CSDN通过智能技术生成

1、webstorm监听scss

File =>> setting =>>Tools =>> File Watchers =>> +scss

1)Program:

Ruby安装位置C:\Ruby26-x64\bin\sass.bat

$FileParentDir表示的是scss文件所在的文件夹的父级文件夹
2)Arguments:

可以选择压缩方式
--no-cache --update -t compressed $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

无压缩方式
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

3)Output paths to refresh:
$FileNameWithoutExtensio

最低0.47元/天 解锁文章
lyxyldd
关注
专栏目录
Webstorm配置YUI来压缩CSS和JS代码
du_5pet的博客
04-10 1167
在网上搜YUI的jar包，下载完放在webstorm的安装目录lib里。 打开webstorm的设置，找到Tool下面的Filewatchers 点右上角的绿色加号，点开之后翻到最底下找到这俩货逐一添加， 配置路径，就是放jar包的文件夹路径，只管Program那一选项，其余不用管，完了直接点OK。 配置完成之后FileWatchers下面就多了这两个 现在差不多就算...
关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js
weixin_33923762的博客
03-30 137
网上看过很多配置思路，自己总结了以下， 就把我个人配置的顺序以及材料分享下，webstrom以下简称WB 1、配置less需要安装nodejs,自行安装。因为要用到npm.我是直接把npm解压到C盘根目录的，先下载解压好待用 　　npm解压包百度云下载地址:http://pan.baidu.com/s/1bpdnmGZ 　　（yuicompressor-2.4.2.jar 这个是WB配置让...
【file watchers小工具】webstorm配置scss/sass自动转换成css代码及scss的使用命令
weixin_43343144的博客
10-29 1449
​​​​​​webstorm配置scss/sass自动转换成css代码及scss的使用命令_艾小逗-CSDN博客 使用Sass命令执行输出css文件【参数请查看官网】 安装Sass | Sass中文网
grunt常用模块
kaosini的专栏
11-25 874
grunt.initConfig方法 用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。 每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下： expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。cwd：需要处理的文件（input）所在的目录。src：表示需要处理的文件。
Idea中 css 、js 压缩插件会自动生成xxx.min.css、xxx.min.js文件
qq_62975017的博客
09-03 1333
Idea中 css 、js 压缩插件会自动生成xxx.min.css、xxx.min.js文件
webstorm scss编译css配置
diaosheng8387的博客
03-10 213
file->setting->File Watchers->scss --no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css 转载于:https://www.cnblogs.com/anyaran/p/4326431.html
如何编译.less文件（less.js）
weixin_41105030的博客
12-03 4131
有多少种方式可以将.less文件转换为.css文件 Less给 CSS 加点料!Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言，因为 Less 和 CSS 非常像，学习很容易。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。官方文档 lessc 首先要安装node环境 全局安装npm/cnpm...
Bootstrap(包括scss)复习
qq_42199147的博客
10-05 1067
BootStrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 中文镜像网站：http://www.bootcss.com 英文官网 http://getbootstrap.com 用于开发响应式布局、移动设备优先的 WEB 项目。 1.使用boot 1.创建boot02文件夹，在boot02中创建css和js文件，把4个文件复制进去，使用ws open boot02 2.在w...
WebStorm、WebPack、ES6、React、JSX
我爱苏小北
07-19 1364
花了很多时间，真的是弄的自己很懵，趁现在整理一下，方便以后查看，也分享给跟我一样懵的人。很多内容是我个人的理解，可能讲究起来有些描述不是很准确，但是我这样的初学者，得先大概了解了、会用了再去深究深层次的东西。 webstorm 首先是一个工具，给我们写代码的，可以直接新建一个project，然后新建文件html、css、js等文件，然后写代码，然后运行。 运行html、css、js程...
vue_t_v7
热门推荐
wansui33_的博客
02-01 2万+
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM
如何解决scss总是自动生成min.css和css的问题
xiaochengstudent的博客
01-17 1525
关于如何取消scss自动生成min.css和css文件
推荐开源项目：mincss - 精简CSS的利器
最新发布
gitblog_00011的博客
04-11 608
推荐开源项目：mincss - 精简CSS的利器 mincssTool for finding out which CSS selectors you're NOT using.项目地址:https://gitcode.com/gh_mirrors/mi/mincss 是一个轻量级的Python库，由Peter Bengtsson开发，旨在帮助开发者自动化地移除HTML文档中未使用的CSS选择器...
webstorm 配置scss
yangchengguo的博客
09-21 356
webstorm 配置scss 1.安装ruby 2.安装好ruby后安装scss 3.scss安装成功后配置webstorm里的scss –no-cache –update FileNameFileName:FileParentDirFileParentDir\css$FileNameWithoutExtension.css–styleexpanded.css –style e
webstorm中安装插件scss
qq_38577700的博客
12-09 933
准备工作 首先根据参考博客的提示安装Ruby和 SASS 然后打开webstorm的设置页面 然后点击以上页面中右上角的加号 然后在页面里配置上相应的参数 如果添加后，sass报错Invalid GBK character "\xE5"解决方案，可以根据参考进行修改。 ...
Webstorm配置Sass文件保存时编译为CSS文件
干志雄的博客
10-16 952
Webstorm配置Sass文件保存时编译为CSS文件
webstrom自动编译sass文件为css
baozhuona的博客
06-23 524
操作步骤如果输出的css文件位置没有特殊要求的话，就无需修改6、7了。生成的css和sass同路径。设置完成后，当任意修改sass文件后保存，立即会生成css文件
webstorm下SCSS自动生成文件配置
djd64521的博客
10-23 387
第一步：安装ruby环境并使用gem install sass 安装sass（国内访问较慢），如果安装不成功可以更换源路径 更换方式： gemsources--removehttps://rubygems.org/ gemsource-ahttp://ruby.taobao.org geminstallsass 或者更换成： gem sources ...
将scss文件转换成css文件
qq_45279180的博客
12-19 6051
大家平时做项目肯定都习惯了使用scss或者less去写样式，如果是使用工程化的项目我们可以借助插件很方便的将scss或者less转换成css。那如果我们没有使用工程化，比如简单的demo或者官网等项目又希望可以通过scss去编写文件应该怎么办呢，我们可以借助sass插件去帮我们转换生成css样式文件，原理和工程化其实是一样的，只是我们手动的去触发了sass的能力。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值