Laravel Mix-对CSS输出进行了预先格式的评论

Question

我正在使用Laravel Mix来编译和缩小WordPress网站的JS和SCSS文件。

当我与" NPM运行生产"混合使用时，删除了SCSS文件的注释。该文件是子主题样式的定义，因此WordPress期望在"子主题"样式表中使用模板标题。当我上传Minified Style.CSS文件（无定义）时，我会收到以下警告：

错误：丢失了模板。独立主题需要具有index.php模板文件。儿童主题需要具有style.css stylesheet的模板标头。

此外，创建/编辑新页面时，没有办法选择页面模板。

当前，我正在将模板标头从SCSS文件复制到编译的CSS文件。我想通过将未修改的主题标头文件预备到编译的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方法默认情况下会更改输出文件，并且没有办法覆盖它。

我对文件的缩小和删除评论感到满意，除了该主题标题评论，因此为SCSS处理完全杀死Minifice不是一个选择。

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

Answer 1

我认为有一种更简单的方法可以保留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
*/

Answer 2

我找到了一个解决方案。它需要一个额外的节点软件包，并利用then Laravel Mix的方法：

1. 使用npm install concat-files
安装Concat-Files软件包
2. 用const concat = require('concat-files');
在webpack.mix.js文件中需要它

3. 使用适当的回调将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');
       });
   });