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

Posted 2023-03-06

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

【英文标题】：Compile one specific Sass-file to a different folder than the rest

【发布时间】：2015-05-09 00:33:42

【问题描述】：

我正在使用 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

【参考方案1】：

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

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

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

有 Grunt/Gulp “构建（分发）任务”，可以将所需的 CSS 文件移动到 CSS 文件夹

这样你在开发过程中可能会有点“混乱”，但在发布你的主题之前，你会执行构建任务并让 Grunt/Gulp 清理你的结构。您甚至可以将 Grunt 或 Gulp 任务映射到 NetBeans 中的“构建”操作，因此最后您只需右键单击您的项目并选择构建。

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

【讨论】：

谢谢，我担心在 Netbeans 中无法实现。我最终将其他文件更改为部分文件，然后将它们导入 style.scss 文件并将文件编译到 teamtour-folder .不过会检查 Gulp 或 Grunt :)

【参考方案2】：

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

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

【参考方案3】：

Wordpress 要求 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');