首页 > Web开发 > 详细

webstorm 插件拓展(一)

时间:2020-03-21 17:49:13      阅读:79      评论:0      收藏:0      [点我收藏+]

个人博客:柚子青年。
原文链接:webstorm 插件拓展(一)

一、 Sass / SCSS 安装

稍微了解一下 Sass 和 SCSS 的区别:

SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能 ;

Sass是基于Ruby的环境, 所以需要先安装Ruby,然后再安装 Sass / SCSS

Ruby 下载链接 https://rubyinstaller.org/downloads/ 可以挑一个你喜欢的版本 不知道用默认的就可以了

技术分享图片

安装过程一直下一步就行了

技术分享图片

默认选择就行了

安装完成之后

打开cmd

输入 cd + 当前 Ruby 所在路径下的bin文件

再输入 gem install sass (如下图 , 这样的话恭喜你成功了)

技术分享图片

这样我们就把 Ruby 和 Sass 都安装好了

接下来就是到 webstorm 里面配置了

打开 settings

技术分享图片

选择 Tools —> File Watchers —> + 号

技术分享图片

选择 Sass 或者 SCSS 配置都是一样的方法 这里选用 SCSS

技术分享图片

只需要配这个 其他的不用管

技术分享图片

在刚刚的bin目录下找到scss.bat (Sass 就用 sass.bat)

技术分享图片

然后 点 OK —> Apply 就行了 (文件命名不能用中文 会报异常)

二、压缩css、js

先下载好 yuicompressor : https://github.com/yui/yuicompressor/releases (任意一个都行 )

技术分享图片

然后到webstorm里面配置 和之前的操作一样

选择 css 或 js 这里以css为例

技术分享图片

同样也只需要配置这一项其他不变

技术分享图片

找到之前下好的jar包 选择到

技术分享图片

然后 点 OK —> Apply 就行了

接下来试一下一整套操作

技术分享图片

新建一个 scss 文件 然后编译成 css 文件 在进行压缩

webstorm 插件拓展(一)

原文:https://www.cnblogs.com/webff/p/12540004.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!