如何编译 scss 源文件输出 css 到父文件夹中: webStorm phpStorm IDEA

如何编译 scss 源文件输出 css 到父文件夹中: webStorm phpStorm IDEA

看该问题必备基础知识：

• 知道​​css​​​ 和​​scss​​ 的关系
• 会用​​webstorm​​​​phpstorm​​​​idea​​​ 任一一款软件中的​​File Watcher​​ 插件
• 电脑已经安装并可执行​​sass​​​ 可执行文件，能进行​​scss​​​ 到​​css​​ 的编译

如果不了解，请移步这里： scss日常用法：入门

这个问题困扰了我一年了，终于今天找到答案，网上说的乱七八糟的，也没说到正点上。
用 ​​​ieda​​​ 系列（webstorm phpstorm idea）软件中的 ​​file watcher​​ 进行文件编译

需求

比如有这样一个项目，css 和 scss 是分开放的，目前需要编辑 scss 文件到 css 文件夹中

── project
   ├── css
   ├── scss
   ├── js
   └── img

配置 File Watcher

新建 scss 的 File Watcher 是这样的内容

我们需要设置的主要是 ​​Arguments​​​ 中的参数
它默认的参数是 ​​​$FileName$:$FileNameWithoutExtension$.css​​​，我翻了半天才找到是什么意思，就卡在这个地方了。
这段参数的意思是：以当前被执行的 scss文件 为基准，如 ​​​index.scss​​​ 这个文件，取 ​​该文件文件名去后缀.css​​​ 就是 ​​index.css​​​ 这里重要的是要明白这里面的冒号 ​​:​​ 是什么意思，意思就是​​冒号后面的变量​​是从​​冒号前面的变量​​取值

点击 ​​Insert Macro​​​ 可以查看可用的变量，里面有​​项目根目录​​等等变量

这个需求中，我们只需要在冒号后面补加 ​​$FileParentDir$/css/​​​ 即可， ​​$FileParentDir$​​​ 代指当前文件的父目录，再取父目录的子目录 ​​css​​​ 即可，最终就填的就是 ​​$FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css​​

结果

这样修改 ​​projects/scss​​​ 目录下的文件时，就会在 ​​project/css​​​ 中生成对应的 ​​css​​ 文件了