webstorm下设置sass

关于sass,就不想多说什么了。只要你有css基础,十分钟入门好吗。可以参考下资料:http://www.w3cplus.com/sassguide/

今天想说的是webStorm下如何实现sass自动编译。

最近在学习SASS,研究了下编译的方法,现在大家一般用的有两种,一种是直接用命令行编译,另一种就是利用一些方便的编译工具,例如腾讯的koala。后来我发现,原来webstorm早就支持了sass编译  - - 真是贴心啊。。。。

废话不多说,直接去webstorm配置去。

打开settings,可以看到Tools下面有个file watchers选项,点进去如下图

webstorm下设置sass_第1张图片

右边显示的就是现在监视的实时编译文件配置,SCSS和SCSS-min就是我配置的。

点击加号,选择SCSS或者SASS(根据自己写的格式,SCSS是最新版的SASS后缀),我们这里选择是SCSS,进入配置界面

webstorm下设置sass_第2张图片

Name和Description就不用多介绍了,Options我们暂时也不用管(其实是我也不懂啥意思。。。)

File type就是我们需要监视的文件类型,这里当然是SCSS

Scope监视范围可以选择不同监视范围,这样就可以设置多个监视配置,输出对应不同的目录或者module下的SCSS文件。

Programe是scss编译工具的目录地址,因为SASS是依赖ruby的,所以我们还需要去安装ruby,ruby在window下的安装文件下载可以在   http://rubyinstaller.org/downloads/   网站找到,我这里下的193。其他环境的可以去官网下载:https://www.ruby-lang.org/

win环境的安装很傻瓜,一路next就行了,不过记得在选择目录的时候,有个add to PATH选项一定要勾上,这样就不用我们手动配置环境变量了。其他环境的没有安装过,百度吧。。。。

安装好ruby以后,打开cmd,输入gem install sass就可以安装SASS了,但是由于gem的默认原地址由于国内伟大的GFW原因可能连接不上导致无法安装,所以我们还需要替换一下。

依次输入:

gem sources –r http://rubygems.org/

gem sources –a http://ruby.taobao.org/

gem sources –l

如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了

然后再输入gem install sass就可以了,完成后输入sass –v 就会返回sass的版本号。

OK以后,在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件(如果需要编译SASS文件则选择sass.bat)

下面的输出参数,可以根据自己的需要填写,下面列出的是一些常用的参数

  • --style表示解析后的css是什么格式,如:--style compressed,有四种取值分别为:nestedexpandedcompactcompressed.
  • --sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的,所以可以不填写
  • --debug-info表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。

下面是四种格式编译后的样式:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

// nested

#main {

  color#fff;

  background-color#000; }

  #main p {

    width10em; }

 

.huge {

  font-size10em;

  font-weightbold;

  text-decorationunderline; }

 

// expanded

#main {

  color#fff;

  background-color#000;

}

#main p {

  width10em;

}

 

.huge {

  font-size10em;

  font-weightbold;

  text-decorationunderline;

}

 

// compact

#main { color#fffbackground-color#000; }

#main p { width10em; }

 

.huge { font-size10emfont-weightboldtext-decorationunderline; }

 

// compressed

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

  

后面就是输出的目录地址和文件名,目录是相对于源文件的,点击Insert macro可以看到一些变量。默认的话是在源文件下输出CSS文件。

配置完毕后,点击OK就完成了。

然后我们新建个SCSS文件,输入内容就可以看到结果了

webstorm下设置sass_第3张图片

可以看到,我输入内容后,直接在源文件下生成了一个css文件和一个map文件。

webstorm下设置sass_第4张图片

 

webstorm下设置sass_第5张图片

这样就代表编译成功了,现在就可以开始我们编写我们的SASS项目了,就不用在考虑编译问题了。

vue vue-style-loader !css-loader错误

最近在学习vue框架,使用webpack打包vue项目,在执行npm run start的时候 出现如下错误:

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue in ./src/components/a.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vu

 

解决思路:

npm install sass-loader --save;

npm install node-sass --save;

然后运行npm run start就可以 

你可能感兴趣的:(小技能,webstorm下设置sass)