webstorm 入门 5：sass、scss、less 监听编译

Question

在使用 webstorm 编辑器时，你不必写 gulp、grunt 配置文件来监听 css 预处理文件来实时编译，也不必安装其他 watch 插件，webstorm 自带就有了。

打开配置（Tools - File Watchers）就可以见到了，点击 + 号就可以新建监听配置了。

同时，在新建一个 sass、scss、less 文件之后，webstorm 会智能的提示你新建一个 watcher 任务：

sass、scss

编译 sass、scss 文件，你需要先安装 node-sass 模块。

npm install -g node-sass

安装好之后，就可以参考官方文档配置来写配置信息

 -w, --watch                Watch a directory or file
 -r, --recursive            Recursively watch directories or files
 -o, --output               Output directory
 -x, --omit-source-map-url  Omit source map URL comment from output
 -i, --indented-syntax      Treat data from stdin as sass code (versus scss)
 -q, --quiet                Suppress log output except on error
 -v, --version              Prints version info
 --output-style             CSS output style (nested | expanded | compact | compressed)
 --indent-type              Indent type for output CSS (space | tab)
 --indent-width             Indent width; number of spaces or tabs (maximum value: 10)
 --linefeed                 Linefeed style (cr | crlf | lf | lfcr)
 --source-comments          Include debug info in output
 --source-map               Emit source map
 --source-map-contents      Embed include contents in map
 --source-map-embed         Embed sourceMappingUrl as data URI
 --source-map-root          Base path, will be emitted in source-map as is
 --include-path             Path to look for imported files
 --precision                The amount of precision allowed in decimal numbers
 --importer                 Path to .js file containing custom importer
    --functions                Path to .js file containing custom functions
    --help                     Print usage info

因为 webstorm 自带了 watch，因此不必配置 -w。最简单的配置是这样的：

node-sass source target

编译后的文件结构是这样的：

每个源文件都会对应一个 css 文件，非常便于管理，而且可以折叠起来，这是其他外置工具无法做到的。

less

less 编译方式大同小异。编译 sass、scss 文件，你需要先安装 less 模块。

-h, --help               Prints help (this message) and exit.
--include-path=PATHS     Sets include paths. Separated by `:'. Use `;' on Windows.
-M, --depends            Outputs a makefile import dependency list to stdout.
--no-color               Disables colorized output.
--no-ie-compat           Disables IE compatibility checks.
--no-js                  Disables JavaScript in less files
-l, --lint               Syntax check only (lint).
-s, --silent             Suppresses output of error messages.
--strict-imports         Forces evaluation of imports.
--insecure               Allows imports from insecure https hosts.
-v, --version            Prints version number and exit.
-x, --compress           Compresses output by removing some whitespaces.
--source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map).
--source-map-rootpath=X  Adds this path onto the sourcemap filename and less file paths.
--source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline Puts the less files into the map instead of referencing them.
--source-map-map-inline  Puts the map (and any less files) into the output css file.
--source-map-url=URL     Sets a custom URL to map file, for sourceMappingURL comment
in generated CSS file.
-rp, --rootpath=URL      Sets rootpath for url rewriting in relative imports and urls
Works with or without the relative-urls option.
-ru, --relative-urls     Re-writes relative urls to the base less file.
-sm=on|off               Turns on or off strict math, where in strict mode, math.
--strict-math=on|off     Requires brackets. This option may default to on and then
be removed in the future.
-su=on|off               Allows mixed units, e.g. 1px+1em or 1px*1px which have units
--strict-units=on|off    that cannot be represented.
--global-var='VAR=VALUE' Defines a variable that can be referenced by the file.
--modify-var='VAR=VALUE' Modifies a variable already declared in the file.
--url-args='QUERYSTRING' Adds params into url tokens (e.g. 42, cb=42 or 'a=1&b=2')
--plugin=PLUGIN=OPTIONS  Loads a plugin. You can also omit the --plugin= if the plugin begins
less-plugin. E.g. the clean css plugin is called less-plugin-clean-css
once installed (npm install less-plugin-clean-css), use either with
--plugin=less-plugin-clean-css or just --clean-css
specify options afterwards e.g. --plugin=less-plugin-clean-css="advanced"
or --clean-css="advanced"

使用方法也很简单：

less source

更多

在重命名 sass、scss、less 文件时，webstorm 也会这样提示你：