Question

我最近在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>

Answer 1

好，所以我想通了，但这不是通过webpack或laravel混合实现的。只需复制所有输出的summernote html并将其粘贴到您从未使用过的新刀片文件（或告诉PurgeCss要查看的任何文件）中。 PurgeCss将浏览所有刀片文件并查找所有类。

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

这将与PurgeCss在文件中找不到的任何类一起使用。只需对所有类进行div，然后遍历该文件中其余视图文件所在的位置即可。

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

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

这种解决方案听起来很愚蠢但很简单。希望这对遇到同样问题的人有所帮助！

laravel-mix-purgecss和summernote

1 个答案: