Wordpress SCSS 文件观察器 - PhpStorm答案

【问题标题】：Wordpress SCSS file watcher - PhpStormWordpress SCSS 文件观察器 - PhpStorm
【发布时间】：2020-09-02 23:21:12
【问题描述】：

我试图在这里和互联网上四处寻找解决方案，但我找不到任何适用于我当前环境的东西。让我解释一下它是怎么回事，我有一个标准的 Wordpress 项目，我正在 [n] 个不同的地方编写 SCSS：

/wp-content/themes/{my-child-theme}/scss 包含我所有的 _{file_name}.scss 分为 [n] 个目录和加载的主题根目录内的 style.scss 文件全部，所以：

应该只生成一个 .css 文件：style.css。这是第一个工作目录。

所有其他都是我开发的自定义插件，所以所有 scss 都将是（我对所有插件使用相同的文件夹结构）/wp-content/plugins/{my_plugin_name}/Resources/assets/css，其中包含一个{my_plugin_name}.scss 文件加载所有其他 scss 部分，如上面的屏幕截图所示，因此 /pages 和 /parts + 如果发生这种情况，还有其他内容。我希望在与 {my_plugin_name}.scss 相同的位置生成此 .css。

我习惯用这个 config.rb 文件：

    http_path = "/"
    css_dir = "/"
    sass_dir = "/"
    images_dir = "/"
    javascripts_dir = "/"

    output_style = :compressed

还有这个文件观察器配置：

如果我一直这样，我所有的 .scss 都会被编译，无处不在。这显然是我不想要的。我应该如何配置这个环境（config.rb + 文件观察器）以使其按我的意愿工作？

如果重要的话，我会在 MacOs Catalina 上使用 PhpStorm 2019.3.4。任何帮助/建议将不胜感激。谢谢

【问题讨论】：

当您在终端中运行 compass 时（即不使用 IDE/文件观察器时），您的 config.rb 是否以所需的方式工作？至于文件观察者，您可以为不同的范围配置多个观察者，使用不同的参数等。
@lena 我尝试将 sass_dir 设置为其中一个文件夹（例如 /wp-content/themes/{my-child-theme}/ 它确实有效。或者说得更好，它搜索子主题文件夹中的所有 .scss，无论 .scss 文件有多深。实际上这对我来说也不是一个解决方案，因为有时我可能在子主题文件夹中有 node_modules，如果我就这样离开它也重新编译其中的所有内容，我实际上并不想要

标签： wordpress sass phpstorm compass file-watcher

【解决方案1】：

未来的导航员，这就是我想出来的，因为没有给我解决方案。创建一个文件观察者和用户，并将此行用作观察者配置的“参数”参数。使用范围“项目文件”和工作目录“$ProjectFileDir$”

compile -c config_plugin.rb --debug-info --time --trace --force
compile -c config_theme.rb --debug-info --time --trace --force

config_[what] 是一个单独的文件，如下所示：

http_path = "wp-content/plugins/plugin_name/"
css_dir = "wp-content/plugins/plugin_name/"
sass_dir = "wp-content/plugins/plugin_name/"
sass_dir = "wp-content/plugins/plugin_name/"
images_dir = "wp-content/plugins/plugin_name/"
javascripts_dir = "wp-content/plugins/plugin_name/"

output_style = :compressed

【讨论】：