webstorm scss to wxss

前言

系统：windows系统
sass版本: 1.42.1 compiled with dart2js 2.14.2

第一步： 全局安装sass

// 使用淘宝镜像安装，确保安装成功
cnpm install -g sass
or
yarn add global  sass 

查看sass否安装成功:在控制台 输入sass --version，出现版本，表示安装成功

详情请查看官网：https://www.sass.hk/ 或者 https://www.runoob.com/sass/sass-install.html

第二步：webstorm设置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查看当前sass版本的命令

=== Input and Output ===================
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=         A path to use when resolving imports.
                               May be passed multiple times.
-s, --style=             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.