laravel-mix-purgecss 和 Summernote

Posted 2023-02-22

【中文标题】laravel-mix-purgecss 和 Summernote

【英文标题】：laravel-mix-purgecss and summernote

【发布时间】：2019-02-20 07:34:57

【问题描述】：

我最近在我的 laravel 项目中添加了 laravel-mix-purgecss。它非常棒，直到我注意到它从 Summernote 中剥离了所有的 css。如何从清除中排除 css 或包含所有类以便 Summernote 工作？

请注意，在我使用 Purgecss 之前，Summernote 运行良好。 Summernote 也位于 Vue 组件中。

这是我迄今为止尝试过的......

webpack.mix.js

let mix = require('laravel-mix');
const glob = require('glob-all');

require('laravel-mix-purgecss');

mix.js('resources/assets/js/app.js', 'public/js')
    .js('resources/assets/js/app-admin.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/app-admin.scss', 'public/css')
   .purgeCss(
        enabled: true,

        // This code didnt help and throws a error when I 'npm run dev'
        // globs: () => [
        //     path.join(__dirname, 'node_modules/summernote/**/*.js'),
        // ],

        // This code was not required. Works without it
        // paths: () => glob.sync([
        //     path.join(__dirname, 'resources/views/**/*.blade.php'),
        //     path.join(__dirname, 'resources/assets/js/**/*.vue')
        // ]),

        extensions: ['html', 'js', 'php', 'vue']
    );

Summernote 包含在 .vue 组件中

<script>
    import 'summernote'
    export default 
        components: 
            'summernote' : require('./../Summernote')
        ,
        .....
    
</script>

【问题讨论】：

扩展 glob 以包含包路径似乎是其他人用来解决此问题的解决方案：github.com/spatie/laravel-mix-purgecss/issues/19，因此您可能走在正确的轨道上。添加globs 选项后出现的错误是什么？

`this.options.globs.push(`TypeError: this.options.globs.push is not a function

【参考方案1】：

好的，所以我想通了，但这不是通过 webpack 或 laravel mix。很简单，您复制所有输出的summernote html 并将其粘贴到您根本不使用的新刀片文件（或您告诉PurgeCss 查找的任何文件）中。 PurgeCss 将查看所有刀片文件并找到所有类。

所以我所做的是制作一个主包含文件，该文件将包含所有尚未出现在所有 Vue 或 Blade.php 文件中的类。无需在 Laravel 中包含该文件。

这将适用于 PurgeCss 在您的文件中找不到的任何类。只需创建一个包含所有类的 div，并在其余视图文件所在的位置通过该文件。

<div class="any-misses-classes-here"></div>

这意味着我上面原始帖子中的代码将起作用。只需删除所有被注释掉的内容。

这个解决方案感觉有点傻但很简单。希望这对遇到同样问题的人有所帮助！

【讨论】：

谢谢！这解决了我的问题。我什至尝试在导入周围添加 /*purgecss start ignore*/ 块，并且只使用 CDN。这是唯一有效的方法。