Struggling to get mini-css-extract-plugin working for both .css and .scss files in Webpack 5

1. webpack-merge

   1 3 2,688 5.6 TypeScript

   Merge designed for webpack

   

   I'm using Webpack 5 with webpack-merge so I can have separate config files for prod and dev with a common file for settings that both prod and dev share.

2. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

   

3. mini-css-extract-plugin

   2 11 4,667 3.6 JavaScript

   Lightweight CSS extraction plugin

   

   In my production file I'm using mini-css-extract-plugin to create a final css file rather than have them loaded in my bundle.js file.

4. mortgageCalc

   3 3 0 3.5 JavaScript

   

   Does anyone know what I'm doing wrong here? It's only a small thing but it's annoying me that it isn't working as expected and not all of the CSS in my final file is minified. Here is the git repo if that helps.

5. css-minimizer-webpack-plugin

   4 1 327 6.3 JavaScript

   cssnano plugin for Webpack

   

   I did actually get it working in the end using css-minimizer-webpack-plugin but your solution is much better since it saves adding an extra rule to my webpack config file and saves me an extra npm package install too.

Suggest a related project