【file watchers小工具】webstorm配置scss/sass自动转换成css代码及scss的使用命令

​​​​​​webstorm配置scss/sass自动转换成css代码及scss的使用命令_艾小逗-CSDN博客

使用Sass命令执行输出css文件【参数请查看官网】

1、【某些参数已失效，请查看最新的参数】

2、使用file watchers工具时，必须改变scss文件才会自动生成css文件

安装Sass | Sass中文网

// 参考scss的版本来配置对应的参数【sass  --help】
scss index.scss index.css --no-source-map

当前Sass版本为【1.71.1 compiled with dart2js 3.3.0】

sass --help

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/> <dir/>

━━━ 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.
-p, --pkg-importer=<TYPE>          Built-in importer(s) to use for pkg: URLs.

          [node]                   Load files like Node.js package resolution.

-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.

━━━ Warnings ━━━━━━━━━━━━━━━━━━━━━━━━━━━
-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.
    --fatal-deprecation            Deprecations to treat as errors. You may also pass a Sass
                                   version to include any behavior deprecated in or before it.
                                   See https://sass-lang.com/documentation/breaking-changes for 
                                   a complete list.

          [abs-percent]            Passing percentages to the Sass abs() function.
          [bogus-combinators]      Leading, trailing, and repeated combinators.
          [call-string]            Passing a string directly to meta.call().
          [color-module-compat]    Using color module functions in place of plain CSS functions.
          [duplicate-var-flags]    Using !default or !global multiple times for one variable.
          [elseif]                 @elseif.
          [function-units]         Passing invalid units to built-in functions.
          [moz-document]           @-moz-document.
          [new-global]             Declaring new variables with !global.
          [null-alpha]             Passing null as alpha in the JS API.
          [slash-div]              / operator for division.
          [strict-unary]           Ambiguous + and - operators.

    --future-deprecation           Opt in to a deprecation early.

          [import]                 @import rules.

━━━ 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.
    --[no-]trace                   Print full Dart stack traces for exceptions.
-h, --help                         Print this usage information.
    --version                      Print the version of Dart Sass.