Laravel Mix - 将格式化注释添加到已编译的 css 输出中

Question

我正在使用 Laravel Mix 为 Wordpress 网站编译和缩小我的 js 和 scss 文件。

当我运行与 'npm run production' 混合时，scss 文件中的注释被删除。该文件是一个 child 主题样式定义，因此 Wordpress 需要 child 主题样式表中的模板 header。当我上传缩小的 style.css 文件（没有定义）时，我收到以下警告：

ERROR: Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.

此外，没有办法select页面模板，当creating/editing新建页面时。

目前我是copy-pasting模板header从scss文件到编译好的css文件。我想通过将 not-modified 主题 header 文件添加到已编译的 scss 文件来自动执行该过程。

我试过这样解决：

const Dotenv = require('dotenv-webpack');

mix.webpackConfig({
    plugins: [
        new Dotenv()
    ]
}).js('assets/js/app.js', 'public/js/')
    .js('assets/js/custom.js', 'public/js/')
    .sass('assets/css/style.scss', './')
    .combine([
        'assets/css/template-header.css',
        './style.css'
    ], './style.css');

但是combine方法minifies the output file by default，没有办法覆盖它。

我对文件缩小和删除评论感到满意，除了那个主题 header 评论，所以为了 scss 处理完全取消缩小并不是一个真正的选择。

有没有办法合并文件以实现我在 Laravel 混合中描述的结果？

Answer 1

我找到了解决办法。它需要一个额外的节点包并利用 then 方法 Laravel mix:

使用 npm install concat-files

concat-files

在 webpack.mix.js 文件中使用 const concat = require('concat-files');

通过适当的回调将 then 方法附加到 mix。就我而言：

mix.webpackConfig({
    plugins: [
        new Dotenv()
    ]
}).js('assets/js/app.js', 'public/js/')
.js('assets/js/custom.js', 'public/js/')
.sass('assets/css/style.scss', './')
.then(function () {
    concat([
        'assets/css/template-header.css',
        'style.css'
    ], 'style.css', function (err) {
        if (err) { throw err; }
        console.log('done');
    });
});

Answer 2

我认为在 Laravel Mix 中有一种更简单的方法可以保留 Wordpress 主题评论块。 “在 SASS 中，注释可以以 /*! 开头，以避免在压缩模式下被删除。” — https://sass-lang.com/documentation/syntax/comments

/*!
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
*/

Laravel Mix - 将格式化注释添加到已编译的 css 输出中

Laravel Mix - prepend formatted comments to compiled css output

webpack

laravel-mix