webstorm配置scss/sass自动转换成css代码及scss的使用命令

webstorm配置scss/sass自动转换成css代码

打开webstorm file => settings => File Watchers 添加 scss
在 Arguments 中配置 ：
默认配置：

$FileName$:$FileNameWithoutExtension$.css

如果想自定义一些配置：

--sourcemap=none --no-cache -t compact $FileName$:$FileNameWithoutExtension$.css

• --sourcemap=none 不生成map文件
• --no-cache 不生成sass-cache文件夹
• -t compact 每行样式一行
  • -t nested 右括号在末尾
  • -t expanded 普通格式
  • -t compressed 压缩成一行

sass使用：

--sourcemap=none 不生成map文件 --no-cache不生成sass-cache文件夹

# 右括号在末尾
sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style nested
# 普通格式
sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style expanded
# 每行样式一行
sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style compact
# 压缩成一行
sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style compressed