sass在webstorm中的是用及配置

我的环境:win7-64bit webstorm9

webstorm安装sass插件

使webstorm自动编译sass文件:

打开设置窗口->file Watchers->右边的绿色加号->scss

点击ok即可完成scss文件的时时编译。

进一步配置1:

时时生成css和css.map文件

在‘Arguments‘:--no-cache --update $FileName$:$FileNameWithoutExtension$.css中添加 --sourcemap --watch

即:--no-cache --update --sourcemap --watch  $FileName$:$FileNameWithoutExtension$.css

在‘Output paths to refresh‘:$FileNameWithoutExtension$.css后面添加:$FileNameWithoutExtension$.css.map

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

单击ok,此时时时编译后会产生.css文件和.css.map两个文件,默认是生成.css一个文件。

进一步配置2:

修改生成文件位置

在 ‘Arguments‘中的 $FileName$:后面和$FileNameWithoutExtension$.css前面添加配置路径

例--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css/*这是在scss文件所在目录的父级目录下的css文件夹放置生成文件,其中的$FileParentDir$代表当前文件夹得父级文件夹*/

如果不好使,一定是哪里没有写对,仔细检查下,注意不要忘记插在中间的冒号。

在webstorm里scss还是很好用的,省去了需要手动编译的麻烦。

如果用的不是webstorm在在这里推荐一款软件Koala,这个软件也是可以时时编译Koala的,但这个软件只能编译文件,不能修改查看文件。

如果用sublime等编辑器的可以考虑时时Koala。

时间: 2024-10-25 17:55:21

sass在webstorm中的是用及配置的相关文章

webstorm中使用sass

最近由原来的sublime转为使用webstorm,用的不是很熟.我们在webstorm中使用sass 1.首先sass是基于ruby的.这个时候我们需要安装ruby. 2.安装成功后.我们需要去掉原有的镜像.通过命令行 1. gem sources –r http://rubygems.org/ gem sources –a http://ruby.taobao.org/ gem sources –l 如果展示出来的是淘宝镜像的地址那么久成功了. 但是听说淘宝已经不维护了.(本人只是听说)很多

轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher

1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551 安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去. 安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确. 2.通过Ruby安装Sass 启动Ruby中的"Start Command Prompt with Ruby" 在命令行中输入: gem sources --remove https://rubygems.org/ gem source -a http

WebStorm中SVN配置

近期在使用WebStorm进行网页开发,值得一提的是WebStorm的确是一个不错的IDE,尽管可能内存开销较大,但是在编写JS的时候提供了很多包括自动完成等强大的功能. 好了,步入正题:在实际项目开发中如何搭建SVN版本控制工具进行团队合作开发呢? 第一步:首先下载安装SVN服务器VisualSVN:附下载链接. 第二步:安装SVN命令行工具SlikSvn:附下载链接. 第三步:在WebStorm中设置命令行程序路径,我的SlikSvn安装路径在:D:\Program Files\SlikSv

Sass for循环中编译%时报错解决方案

sass功能强大,特别是支持for循环,节省大量开发时间,但是在开发时遇到一个问题,直接使用%时没有问题,当有变量时再加% 单位在编译时报错: 这样没有问题: @for $width from 0 to 10{ .wp#{$width}{ width:$width px; } } 但是这样就有问题了: @for $width from 0 to 10{ .wp#{$width}{ width:$width%; } } 或者这样: @for $width from 0 to 10{ .wp#{$w

如何在WebStorm中设置mongo

在webstorm中安装mongo的步骤 打开webstorm,输入ctrl+shift+A ->plugins->mongo->install,安装完成后,settings->other settings->mongo servers->打开终端,输入 which mongo 回车后复制路径,将路径复制到mongo servers那个界面->点击test->点击右边的' + ' ->在label里面起名,随便起 ->ok 结束,然后就可以在we

关于nodeJS 在webstorm中的服务器配置

配置node环境,基本都是用的express框架去构建, webstorm 中内置了express  node 的工程脚手架 localtion 配置好你项目的地址路径. 这个时候webstorm会把服务器,和项目常用目录结构都给你生成好. www.这个文件里配置好你服务器的端口号.3300 在这个onlistening中主要是你项目启动后再后台所提示出来的文字,手动添加一句start,  更明确的看到项目成功启动. 最后点击webstorm右上角的debug图标..红框中是你的服务器名称和de

webstorm中添加使用git

1.pc中先安装git 2.在webstorm中选择VCS -> Checkout from Version Control -> Git Git Repository URL:  [git 路径] Parent Directory:      [本地要存放地址的父目录] Directory Name:       [项目名称] 3.在webstorm中添加git.exe配置,如图: 4.vcs->git->remotes中添加git url路径 5.VCS 选择 -> En

WebStorm中Node.js项目配置教程——项目设置

上一章讲解了Node.js项目在WebStorm中的两种创建方式,当完成Node.js项目创建以后,剩下的就是涉及配置设置工作. 为了确保Node.js全局和Node.js核心模块的代码完成功能,打开Settings|Languages & Frameworks | JavaScript|Libraries进行设置: 值得注意的是:WebStorm将建议创建一个Node.js依赖的JavaScript库,并添加到列表用于代码完成.语法突出显示.导航和文档查找等. 对于Express框架,可以直接

Win8.1升级win10后webstorm中terminal不能输入问题

昨天刚刚升级了win10,今天使用webstorm的时候发现webstorm中的terminal不能输入任何字符了,尝试各种办法都尚未解决. 后来得知解决办法:打开命令提示框---->属性---->选项,勾选“使用旧版控制台(需要重新启动)”, 点击确定后重新启动webstorm,就可以输入了. 现在升级win10的人还不少,虽然开发者使用windows的在逐渐减少,但是还是希望能够让更多的人看到,帮到一些人,不用再像我一样浪费时间.