前言

系統(tǒng)：windows系統(tǒng)
sass版本: 1.42.1 compiled with dart2js 2.14.2

第一步： 全局安裝sass

// 使用淘寶鏡像安裝蔫仙，確保安裝成功
cnpm install -g sass
or
yarn add global  sass 

查看sass否安裝成功:在控制臺 輸入sass --version，出現(xiàn)版本，表示安裝成功

詳情請查看官網(wǎng)：https://www.sass.hk/ 或者 https://www.runoob.com/sass/sass-install.html

第二步：webstorm設(shè)置scss 編譯成wxss

新建一個fileWatchers,點擊Apply，然后點ok

image.png

Arguments輸入:

$FileName$:$FileNameWithoutExtension$.wxss --no-source-map

Output paths to refresh輸入

$FileNameWithoutExtension$.wxss

第三步：驗證

image.png

如需要生成map文件，Arguments輸入:去掉--no-source-map

效果如下圖所示：

image.png

補充

可以通過sass --help查看當(dāng)前sass版本的命令

=== Input and Output ===================
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=<PATH>         A path to use when resolving imports.
                               May be passed multiple times.
-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]
    --[no-]charset             Emit a @charset or BOM for CSS with non-ASCII characters.
                               (defaults to on)
    --[no-]error-css           When an error occurs, emit a stylesheet describing it.
                               Defaults to true when compiling to a file.
    --update                   Only compile out-of-date stylesheets.

=== Source Maps ========================
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)
    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]
    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

=== Other ==============================
-w, --watch                    Watch stylesheets and recompile when they change.
    --[no-]poll                Manually check for changes rather than using a native watcher.
                               Only valid with --watch.
    --[no-]stop-on-error       Don't compile more files once an error is encountered.
-i, --interactive              Run an interactive SassScript shell.
-c, --[no-]color               Whether to use terminal colors for messages.
    --[no-]unicode             Whether to use Unicode characters for messages.
-q, --[no-]quiet               Don't print warnings.
    --[no-]quiet-deps          Don't print compiler warnings from dependencies.
                               Stylesheets imported through load paths count as dependencies.
    --[no-]verbose             Print all deprecation warnings even when they're repetitive.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.