We've moved discussions to Discord

Join Discord

Webpack warning when compiling assets in production, some node_module CSS not being included

Tom Iwaniec β€’
Two issues that may be related, first I'm getting the following warning when precompiling assets in production:
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/javascript/stylesheets/application.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss 242 KiB {0} [built]

Second and more importantly, CSS from node_modules, such as Dropzone, is not being included or functioning on the production server whereas it works fine in development. In my forms.scss I have:
@import "dropzone/dist/min/dropzone.min.css";
@import "dropzone/dist/min/basic.min.css";

All other javascript/CSS seems to be working fine except for anything within a specific node_module.
Chris Oliver β€’
Tom, 

1. That's not a warning, just some logs.
2. We're using PurgeCSS which removes CSS that it doesn't see used anywhere. Make sure you add it to the whitelist so it doesn't get stripped out. πŸ‘
Tom Iwaniec β€’
Thanks for the response, Chris, really appreciate it.

I actually have PurgeCSS temporarily disabled (emphasis on temporarily, I understand its importance) on this project for production with the following in tailwind.config.js:

purge: {
    // enabled: process.env.NODE_ENV === 'production',
    enabled: false,
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js'
    ]
  }

So might this be a webpacker issue? Or could PurgeCSS still be getting at my CSS somehow even with that line above?
Chris Oliver β€’
PurgeCSS is configured in postcss.config.js for Jumpstart, so that's why it wasn't disabling for you. 

We want to strip all the CSS, just not Tailwind so we don't use their config.

You should be able to just add the dropzone CSS to the whitelist in the postcss config and that should take care of it.

To test, just enable development on line 16 of the postcss config so you can try it out before going to production. πŸ‘

Remove it when you're done, otherwise development will be real slow. 😬
Tom Iwaniec β€’
THANK YOU! I spent way too long going down the wrong path since I assumed PurgeCSS was already disabled. This fixed it, really appreciate the help.
Chris Oliver β€’
 Happy to help! πŸ’ͺ
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.