Using both Laravel Mix PurgeCSS and Summernote in your project will help optimize

After integrating laravel-mix-purgecss into my Laravel project, everything seemed to be going smoothly until I realized that it was removing all the CSS from Summernote. How can I prevent Purgecss from stripping out Summernote's CSS classes or ensure that all necessary classes are included for Summernote to function properly?

It's worth noting that Summernote was working fine before implementing Purgecss. Additionally, Summernote is located within a Vue Component.

Here are the steps I've taken 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,

        // The following code did not resolve the issue and causes an error when running 'npm run dev'
        // globs: () => [
        //     path.join(__dirname, 'node_modules/summernote/**/*.js'),
        // ],

        // This code was found to be unnecessary as it 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 being used in a .vue component

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

Answer №1

After some experimentation, I discovered a workaround that doesn't involve webpack or laravel mix. Instead of relying on those tools, you can manually copy the HTML output from summernote and paste it into a new blade file (or any designated file for PurgeCss to scan) that is never actually used in your project. PurgeCss will then search through all your blade files and identify all classes.

To streamline this process, I created a master include file containing all classes not already present in Vue or blade.php files. This file does not need to be included in Laravel.

This method works well for any classes that PurgeCss cannot locate within your existing files. Simply create a div element with these missing classes and include that file alongside your other view files.

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

By implementing this approach, the code in my original post above will function correctly once you remove any commented-out sections.

Although this solution may seem unconventional, it provides a straightforward fix for this issue. Hopefully, this helps others facing the same challenge!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid automatic reloading immediately after saving by utilizing vue-query in conjunction with the invalidateQueries() function

I have a Vue component where saving triggers the server to return the updated record. This means there is no need for an additional request to the server. However, I have noticed that the cache needs to be invalidated, causing a new GET request: queryClien ...

I am looking to enhance a button's appearance by applying CSS styling with a combination of two distinct flat colors

Is there a way to apply CSS styling to a button by incorporating two distinct flat colors? Specifically, I would like the left half of the button to be blue and the right half to be red. ...

Press the button in the parent component, retrieve information from the child component, and utilize it in a method (Vue 3)

I am currently using Vue3 in combination with Bootstrap 5. MY ISSUE: I am trying to click a button in my parent.vue. Upon clicking, I want to retrieve the data from my child.vue and access it within the method in my parent.vue. However, the data always r ...

Issues with Wamp server's CSS display are frustrating and need to

I have created a pair of divs in a .css file and then I connected that .css file in a php header file as shown below: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/headercss.css" type="text/css" media="screen" title ...

What are some ways I can adjust the spacing between the four quadrants on my webpage using HTML/CSS?

After successfully creating four equi-sized/quadrants on my page using the solution found here, I now want to give them some breathing room. The current layout looks like this: https://i.sstatic.net/8acjm.png I attempted adding margin and padding to the ...

The full height of the image cannot be captured by html2canvas

It baffles me that html2canvas is failing to capture the full height of the div. html2canvas($container, { height: $container.height(), onrendered: function(canvas) { var data = canvas.toDataURL('image/png'); ...

Clicking the Ajax jQuery button triggers a change in color, as well as toggling the value of a column between true and false

Trying to figure out this chart ECDLpayments -> ecdp_Payed = boolean true or false Managing the system public function addUserPayments() { if (Request::ajax()) { $input = Input::all(); $newpayment = new ECDLPayments(); ...

Issue with VueJS where changes made to properties in the mounted hook do not properly trigger the

I'm working on a VueJS component that features a button with computed properties for its class and text. These properties change every time the button is clicked, updating smoothly with each interaction. However, I've encountered an issue when at ...

Troubleshooting the min-height problem with CSS in AngularJS Routing

My current setup is as follows in a basic HTML file: * { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; margin: 0; } section { display: block; width: 100%; min-height: 100%; padding: 1em } .b1 { background: ...

How can you convert parameters to integers instead of strings in Vue Router?

I have noticed a discrepancy in how URL parameters are treated between using the browser field and programmatically with this.$route.push({}). Specifically, when entering a URL in the browser field, the parameters are cast as strings instead of integers. F ...

Using Vue to cycle through an array of objects, and emphasize the chosen item by clicking on it

I have to display an array of objects in the DOM by using map method. Each item has a @click event listener where I want to highlight it with a CSS class 'hover'. The desired functionality is to mimic a menu system where only the clicked item sho ...

Having trouble with the page background image link not functioning properly because of the wrapper

I am facing an issue with my HTML layout. I have a full background image set within the body tag, followed by a wrapper element: <body> <a href="#" id="bkimage">Background Image</a> <wrapper> ................. Here are the styles ...

Verifying the Compatibility of Linear Gradient in CSS

To verify support for CSS properties such as border-radius, use the following code snippet: if(document.createElement('test').style.borderRadius===''){ //some code } But how can I check for support of linear gradients? The declaration ...

Do not execute the script if the window's width is below a certain threshold

I have a unique website layout that adjusts to different screen sizes, and I've incorporated some jQuery functionality. Here is a snippet of the code: <script> $(document).ready(function(){ $("#D1000C36LPB3").click(function(){$("#D ...

change the css style with the !important rule to muiStyle

Currently implementing the latest Material-UI library in my project. I am in the process of migrating old CSS files to new MuiStyles. I am converting it within my MuiStyle object using JavaScript as shown below: const muiStyle = { fabStyle: { displ ...

Utilizing conditional styling in React: the ability to add or attach CSS classes based on

Is there a more efficient way to implement conditional formatting for this scenario? const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => { const className = this.props.store.currentPage === this.props.pageNum ...

What is the best way to specify the border color of a fieldset?

Is there a way to set the border color of a fieldset while removing the default border color? I have tried using a class but it doesn't seem to work as expected. How can I achieve setting the border color for the fieldset? <fieldset class="field_s ...

Setting up LOCAL versus CDN resources for DEV and PRODUCTION in Laravel 5 (such as bootstrap, jquery, and angular)

Apologies in advance if this question has been addressed elsewhere. My search terms didn't yield any results. I want to set up two different configurations for fetching resource files such as jQuery, Bootstrap, Angular... etc For Production, I prefe ...

Tips for extracting links from a webpage using CSS selectors and Selenium

Is there a way to extract the HTML links per block on a page that renders in JavaScript? Would using CSS or Selenium be more effective than BeautifulSoup? If so, how would I go about utilizing either of those methods to achieve the extraction of the HTML ...

How can I restrict the number of characters per line in a textarea using javascript or jQuery?

Is there a method to control the number of characters per line in a textarea? For example, on lines 1-3 of the textarea, only 20 characters can be entered, while on subsequent lines, up to 50 characters are allowed. The current structure of the textarea l ...