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

TOC

• sass、scss
• less
• 更多

在使用 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 commentin generated CSS file.-rp, --rootpath=URL      Sets rootpath for url rewriting in relative imports and urlsWorks 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 thenbe 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 beginsless-plugin. E.g. the clean css plugin is called less-plugin-clean-cssonce installed (npm install less-plugin-clean-css), use either with--plugin=less-plugin-clean-css or just --clean-cssspecify options afterwards e.g. --plugin=less-plugin-clean-css="advanced"or --clean-css="advanced"

使用方法也很简单：

less source

更多

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