Webstorm编译scss(基于Ruby)

无道 2019-12-31 0 条评论 编程相关 阅读378 手机阅读

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

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

下载

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

选择RubyInstallers里面的文件:

截图-1577755974

下载完成:

截图-1577755986

安装

截图-1577756008

截图-1577756042

截图-1577756075

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

截图-1577756260

我这里选择1了。

检测

打开命令行,输入gem -v

截图-1577756342

更换gem源

删除原gem源:

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

截图-1577756489

添加淘宝镜像源:

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

截图-1577756517

安装sass

gem install sass

结果:

截图-1577756609

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

截图-1577756638

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

sass -v

截图-1577756687

Webstorm设置

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

找到设置

路径:File | Settings | Tools | File Watchers

截图-1577756863

截图-1577756875

然后需要配置参数:

截图-1577757074

Program

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

Arguments

参数,

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

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

什么意思:

截图-1577757451

2、压缩

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

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

编译的就压缩了:

截图-1577757593

Output paths to refresh

相应的,这里就变成了:

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

截图-1577757341

效果:

截图-1577757466

添加css3前缀

需要node环境:

安装Autoprefixer,

npm install autoprefixer -g

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

npm install postcss-cli -g

然后配置External Tools

路径:File | Settings | Tools | External Tools

截图-1577759242

参数

名称:随意

描述:随意

Program

你安装的postcss.cmd的路径

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

截图-1577759407

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

Arguments

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

参数意思:

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

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

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

Working directory

$ProjectFileDir$

工作区目录,如上就好。

使用

这只编译好了的css文件:

截图-1577759649

执行:

截图-1577759678

结果:

截图-1577759697

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: scss 编译scss ruby
修改: 2019-12-31 10:35
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~