专栏首页无道编程Webstorm编译scss(基于Ruby)

Webstorm编译scss(基于Ruby)

在很早之前的一篇文章,讲了用node-sass来编译,参考:https://www.misiyu.cn/article/48.html

今天来讲讲使用ruby来编译。

下载

下载ruby:https://rubyinstaller.org/downloads/archives/

选择RubyInstallers里面的文件:

下载完成:

安装

然后之后会有一个微软的什么东西(MSYS2)安装:

我这里选择1了。

检测

打开命令行,输入gem -v

更换gem源

删除原gem源:

gem sources --remove https://rubygems.org/

添加淘宝镜像源:

gem sources -a https://gems.ruby-china.com

安装sass

gem install sass

结果:

安装完成,就应该在ruby的安装目录下的bin目录下有一个sass.bat文件:

这会导致你可以命令行输入

sass -v

Webstorm设置

以上步骤就成功安装sass了,然后接下来就是在Webstorm中如何使用了。

找到设置

路径:File | Settings | Tools | File Watchers

然后需要配置参数:

Program

安装sass的目录,也即我之前说的ruby安装目录下的bin目录下的sass.bat文件,自行找到即可。

Arguments

参数,

--no-cache --update --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

1、以上配置的意思是在scss文件存在的上级目录下的css文件夹生成编译好的css文件。

什么意思:

2、压缩

可选压缩,继续添加--style compressed即可,也即:

--no-cache --update --sourcemap --style  compressed $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

编译的就压缩了:

Output paths to refresh

相应的,这里就变成了:

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

效果:

添加css3前缀

需要node环境:

安装Autoprefixer,

npm install autoprefixer -g

安装postcss-cli,Autoprefixer其实是postcss的插件

npm install postcss-cli -g

然后配置External Tools

路径:File | Settings | Tools | External Tools

参数

名称:随意

描述:随意

Program

你安装的postcss.cmd的路径

由于我自定义了npm全局安装的文件的位置,所以我的是:

默认应该是C盘。可以自己找一下。

Arguments

$FileDir$/$FileName$ -u autoprefixer -r

参数意思:

$FileDir$/$FileName$将当前选择文件为输入文件

-u(--use) 使用autoprefixer插件

-r(--replace) 前缀写好了的内容,在当前文件替换。

Working directory

$ProjectFileDir$

工作区目录,如上就好。

使用

这只编译好了的css文件:

执行:

结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webstorm编译scss文件[附CSS3前缀方法]

    该方法不仅适用于webstorm,还适用于Jetbrains家下的能写css所有的产品。比如:Phpstorm, PyCharm等等。

    无道
  • Laravel中基于XunSearch的中文搜索解决方案

    分词搜索始终不是那么好解决,但是基本也有现成的解决方案。在我博客之前的文章我也介绍过Sphinx分词搜索:CentOS7下安装Sphinx 中文分词【PHP+M...

    无道
  • PHP本地查询IP地址归属地【非接口】

    为工具站做了个查询IP地址的工具,不想用网络上的接口,因为接口有各种不稳定因素。就想在本地实现一个。

    无道
  • 博客 | 常见32项NLP任务及其评价指标和对应达到SOTA的paper

    对于初学NLP的人,了解NLP的各项技术非常重要;对于想进阶的人,了解各项技术的评测指标、数据集很重要;对于想做学术和研究的人,了解各项技术在对应的评测数据集上...

    AI研习社
  • Confluence 6 H2 数据库连接与合并整合

    可以选的,你可以使用 H2 console 来连接到你的 H2 数据库。最简单的访问 Console 的方法是双击 H2 数据库的 jar 文件。这个文件在 <...

    HoneyMoose
  • 两天收获 2000 万 UV 和 8000 万 PV,它才是圣诞热点最大赢家

    这场看似无厘头的「闹剧」,却让许多微信小程序获得「意外之喜」,「即萌头像小助手」小程序就是其中之一。

    知晓君
  • cvte面经

    一面:现场面去的很早明显焦虑并问不到面经(50分钟) (1)自我介绍这里介绍完提到自己熟悉的知识,项目 (2)项目介绍项目中遇到的难点如何解决的 (3)集合框架...

    牛客网
  • PowerBI 2020二月更新 真增量刷新全面普及

    我们对本月的更新感到非常兴奋!我们发布了两个最重要的社区请求:Power BI Pro的增量刷新和分层切片器。此外,我们还对新功能区和一些新的DAX功能进行了一...

    BI佐罗
  • SpringCloud分布式配置中心

    Spring Cloud Config为服务端和客户端提供了分布式系统的外部化配置支持。配置服务器为各应用的所有环境提供了一个中心化的外部配置。它实现了对服务端...

    刘文正
  • 如何短时间内快速掌握数据可视化神器Power BI?

    作者 CDA 数据分析师 BI 其实是 Business Intelligence 的缩写,意思是商业智能。“Excel”是大多数业务人员必需熟练掌握的办公工...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券