Question

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

当我使用＆n 39运行生产＆＃39;时，会删除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 中保留 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

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

使用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');
    });
});

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

2 个答案: