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

Question

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

这是我的文件夹结构：

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

我使用NetBeans作为IDE

Answer 1

这在NetBeans中默认的Less / Scss支持是不可行的，映射是基于文件夹的（虽然我相信基于文件的映射报告了一些错误/增强 - 我会调查它）。

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

• 更改Less编译器的映射以在teamtour中生成css文件

• 有Grunt / Gulp＆＃34;构建（分发）任务＆＃34;这会将想要的CSS文件移动到CSS文件夹

通过这种方式你可以有点＆＃34;混乱＆＃34;在开发期间，但在发布主题之前，您将执行构建任务并让Grunt / Gulp清理您的结构。您甚至可以将Grunt或Gulp任务映射到＆＃34; Build＆＃34; NetBeans中的操作，所以最后您只需右键单击您的项目并选择Build。

一个注意事项：Gulp仅在NetBeans的Dev版本中可用

Answer 2

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

另一个可以减少HTTP请求数量的建议是将 SASS 编译到主题根目录中，并@import编译所有其他 CSS 文件进入主题的主要 SCSS 文件。然后，您的主题只需要加载一个 CSS 文件。

Answer 3

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

多年来我没有使用style.css作为实际样式，这是我的“样板”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');