时间戳

首页 > 解决方案 > laravel-mix-purgecss 和 Summernote

css - laravel-mix-purgecss 和 Summernote

问题描述

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

标签： csslaravelvue.jssummernotelaravel-mix

解决方案

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

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

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

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

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

这种解决方案感觉有点傻但很简单。希望这可以帮助任何有同样问题的人！

推荐阅读