webstorm 设置 sass自动编译问题

APICloud 发布于2019-04-23 13:13 / 1629人阅读

摘要：语法使用它带来的好处，就不再这里做介绍了，主要看怎么在里配置自动编译。因为国内网络的问题导致源间歇性中断因此我们需要更换源。也就是说，任何标准的样式表都是具有相同语义的有效的文件。参考文档官网设置自动编译及参数配置

　　sass语法、使用它带来的好处，就不再这里做介绍了，主要看怎么在webstorm里配置自动编译。

　　sass编译是需要Ruby环境的，可以到这里去下载 : https://rubyinstaller.org/downloads/ ,安装时选择加入Path

安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已经安装成功，Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。（使用淘宝的gem源https://ruby.taobao.org/ ）

//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/

//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

我的机器上由于https的问题加无法访问淘宝源，我把它换成了腾讯源，腾讯源地址： http://gems.ruby-china.com/

我们下面来安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

在每一个安装过程中，你都会看到如下输出：

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

下面打开webstorm, File -> Settings -> Tools -> File Watchers + -> SCSS

　　在这里 File Type 配置为 Scss Style Sheet ,不要配置为 SASS style sheet 。SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表

都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法

Progarm: Ruby SaSS 扩展路径

C:Ruby25-x64binsass.bat

　　 Arguments:配置编译参数

--no-cache --update -t compact $FileName$:$FileNameWithoutExtension$.css

-t 后面有4种参数可选：

嵌套输出方式 nested 它是默认值
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed 生产环境当中一般使用这个

　　Output paths to refresh：文件输出路径

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

配置完毕，添加一个 .scss文件，果然自动编译成了.css文件。

参考文档： Sass官网

　　　　　 webstorm设置sass自动编译,及参数配置

GPU云服务器云服务器不自动编译 ubuntu 编译问题 linux 内核编译问题修改jsp不自动编译

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1607.html

sass的基本使用

摘要：本文所有的例子都是在中编译，而可以自行编译，具体可以查看该链接配置的概念定义是的一种预处理器，文件后缀名为，可以用中的来转成样式。最近在项目中利用到了css预处理器（sass），而之前没接触过的本博主出于好奇心，就在业余的时间里搜了一些资料来看看，看完后觉得sass挺不错，就想简单的介绍一下sass的基本使用方法（ps：本文只介绍sass的一些基本使用，而这些内容都是本博主觉得比较有...

alighters 2019-08-30 15:53 评论0 收藏0
前端入门23-CSS预处理器（Less&Sass）

摘要：声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候，预处理器就出现了，其实应该是说和这类语言出现了。声明本篇内容梳理自以下几个来源： Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网感谢大佬们的分享。正文-CSS预处理（less&Sass） CSS预处理什么是 CSS 预处理？为什么要有 CSS 预处理？这...

freecode 2019-04-23 13:07 评论0 收藏0
webstorm修改文件，webpack-dev-server不会自动编译刷新

摘要：重装了，一升不要紧，打开老项目，开启，然后改代码，发现浏览器不会自动刷新了这可急死我了，各种卸载，安装各种版本，调试。各种查资料查文档，都讲的是参数配置启动就会自刷新，参数都是其它用途。重装了 webstorm ，一升不要紧，打开老项目，开启webpakc-dev-server，然后改代码，发现浏览器不会自动刷新了！！！这可急死我了，各种卸载webpack、webpack-dev-...

CarlBenjamin 2019-08-02 16:00 评论0 收藏0