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

Question

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

当我使用'npm run production'运行mix时，会删除scss文件中的注释。该文件是子主题样式定义，因此Wordpress期望子主题样式表中的模板头。当我上传缩小的style.css文件（没有定义）时，我收到以下警告：

错误：模板丢失。独立主题需要有一个index.php模板文件。子主题需要在style.css样式表中有一个Template头。

此外，在创建/编辑新页面时，无法选择页面模板。

目前，我将模板头从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方法minifies the output file by default，并没有办法覆盖它。

我很满意文件缩小和删除注释，除了那个主题标题注释，因此完全杀死缩小scss处理并不是一个选项。

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

Answer 1

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

1. 用concat-files安装npm install concat-files包
2. 需要在webpack.mix.js文件中使用const concat = require('concat-files');
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');
       });
   });