laravel-mix-purgecss and summernote

user_6353597 0
Viewed 843

I have recently added laravel-mix-purgecss to my laravel project. Its went great till I noticed it stripped all the css from Summernote. How can I exclude the css from the purge or include all the classes so Summernote works?

Note that Summernote worked fine until I used Purgecss. Also Summernote is inside a Vue Component.

Here is what I tried so far..

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 is included in a .vue component

<script>
    import 'summernote'
    export default {
        components: {
            'summernote' : require('./../Summernote')
        },
        .....
    }
</script>
summernote laravel-mix laravel vue.js css
1 Answers

Ok, So I figured it out but it's not through webpack or laravel mix. It's simply that you copy all the outputted html of summernote and paste it in a new blade file (or any file that you tell PurgeCss to look in) that you simply never use. PurgeCss will look through all your blade files and find all the classes.

So what I've done is make a master include file that will contain all classes that doesnt not already appear in all Vue or blade.php files. No need to include that file in Laravel.

This will work with any class that PurgeCss can not find in your files. Just make a div with all the classes and through that file in where the rest of your view files are.

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

That means the Code in my original post above will work. Just delete everything that is commented out.

This solutions feels kind of silly but simple. Hope this helps anyone with the same issue!

user_63535970
Related