将一个特定的 Sass 文件编译到与其他文件不同的文件夹中

Question

我正在使用 HTML、PHP 和 SASS 创建一个 Wordpress 主题。 SASS-files 编译到名为 'css' 的文件夹，但由于我正在创建 Wordpress 主题，WP 要求 style.css 文件与其他主题文件位于同一文件夹中。

这是我的文件夹结构：

现在我想要的是更改编译设置，以便 style.css 文件位于 teamtour-folder 而不是 css-文件夹，而无需每次保存时手动将其从 css-文件夹 中移动，而其他 scss-文件保留在 css-文件夹 中。最简单的方法就是将每个 sass 文件编译到 teamtour 文件夹 ，我知道，这个问题只能是微不足道的，但我仍然想有一个有组织的文件夹结构。

我将 NetBeans 用作 IDE

Answer 1

在 NetBeans 中默认 Less/Scss 支持是不可行的，映射是基于文件夹的（虽然我相信有一些 bug/enhancement 报告了基于文件的映射 - 我会调查一下).

作为最简单和最快的解决方案，我会做的是：

更改 Less 编译器的映射以在 teamtour
有 Grunt/Gulp "build (distribution) task" 可以将需要的 CSS 文件移动到 CSS 文件夹

这样您可以在开发期间有一点 "mess"，但在发布您的主题之前，您将执行构建任务并让 Grunt/Gulp 清理您的结构。您甚至可以将 Grunt 或 Gulp 任务映射到 NetBeans 中的 "Build" 操作，因此最后您只需右键单击您的项目并 select Build.

请注意：Gulp 仅在 NetBeans 的开发版本中可用

Answer 2

另一种方法是让 SASS 将其所有输出编译到 css目录，并将主题 CSS 文件缩减为单个 @import 语句。缺点当然是额外的 HTTP 请求。

另一个减少 HTTP 请求数量的建议是 SASS 编译到主题根目录中，@import 所有其他CSS 文件到主题的主 SCSS 文件中。那么你的主题只需要加载一个CSS文件。

Answer 3

Wordpress 要求主题 "root" 文件夹中的 a style.css - 它不要求在使用主题时实际加载该文件。该文件只需要在评论中包含主题名称和其他一些详细信息 - 我想此设置是出于遗留原因。

我已经好几年没用 style.css 实际样式了，这是我的 "boilerplate" style.css，完成后看起来没什么不同。

/*
Theme Name: BLANK THEME
Author: Mikk3lRo
Author URI: 
Description: Blank theme
Version: 0.1
License: 
Text Domain: prfx
*/

实际样式表包含在子文件夹中：

wp_enqueue_style('prfx_styles', get_template_directory_uri() . '/css/production.css');

将一个特定的 Sass 文件编译到与其他文件不同的文件夹中

Compile one specific Sass-file to a different folder than the rest

netbeans

sass