在使用 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 也会这样提示你：

最后

以上就是诚心小馒头为你收集整理的webstorm入门5-sass、scss、less监听编译 sass、scss less 更多的全部内容，希望文章能够帮你解决webstorm入门5-sass、scss、less监听编译 sass、scss less 更多所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。