webstorm scss 自动编译添加css3前缀

最新推荐文章于 2025-04-27 19:47:50 发布

原创最新推荐文章于 2025-04-27 19:47:50 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scss #sass #webstorm

html5 同时被 2 个专栏收录

19 篇文章

订阅专栏

编辑器

2 篇文章

订阅专栏

本文介绍如何在WebStorm中配置SASS或SCSS编译为CSS的方法，包括安装Ruby、SCSS命令及Autoprefixer等工具，并详细说明WebStorm内部的设置步骤。

sass或者scss编译为css时，webstorm配置如下：（http://www.cnblogs.com/phoenix-smile/p/5063216.html）
如果没有安装ruby则先安装，下载地址：http://rubyinstaller.org/downloads
安装注意：
1.安装ruby，此步骤只需留意勾选Add Ruby executables to your PATH这个选项，它将添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境，影响Webstorm 自动编译。
2.安装后，在开始菜单找到Start Command Prompt with Ruby
3.安装scss   命令为：gem install sass
4.安装Autoprefixer，是不是全局安装（-g）那就看你自己的环境了   命令为：npm install autoprefixer -g
5.安装postcss-cli，Autoprefixer其实是postcss的插件        命令为：npm install postcss-cli -g
6.配置webstorm-autoprefixer  打开Webstorm设置，File  -> settings  -> Tools -> File Watcher ;点击新增按钮
7.修改Arguments，默认输出到scss文件同目录，建议修改到其他位置，（7.1或7.2任选）
  7.1修改到上一级的stylesheets目录下
    修改前--no-cache --update $FileName$:$FileNameWithoutExtension$.css
    修改后--no-cache --update $FileName$:$FileParentDir$\stylesheets\$FileNameWithoutExtension$.css
  7.2修改到指定css目录下，从项目根目录开始找
    修改前 Arguments:--no-cache --update $FileName$:$FileNameWithoutExtension$.css
          Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

    修改后（本项目） Arguments:--style expanded --no-cache --update $FileName$:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css
          Output paths to refresh:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css.map

8.配置autoprefixer

File->Tools->External Tools 点击add

Name:Autoprefixer

description:Autoprefixer

Program:C:\Program Files\nodejs\node_global\postcss.cmd

Parameters:-u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$

Working directory:$ProjectFileDir$

其余默认不变

参考链接：http://jingyan.baidu.com/article/3c343ff7e0a39d0d3779633c.html