The mini-css-extract-plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
Questions tagged [mini-css-extract-plugin]
185 questions
6
votes
4 answers
Webpack cannot find module mini-css-extract-plugin
I'm using Webpack ^4.26.0. I've used "extract-text-webpack-plugin" with Webpack 3 before to use for CSS. But I've read that that plugin isn't working anymore on Webpack 4. And "extract-text-webpack-plugin" suggest to use the…

Elvira
- 1,410
- 5
- 23
- 50
6
votes
4 answers
how to prevent mini-css-extract-plugin from creating a js entrypint
I am relatively new to express + webpack, so i am unclear wether this is intended or not, and if not, how to properly configure it. the question is around the additional asset & entry point created when using the mini-css-extract-plugin.
webpack…

brewster
- 4,342
- 6
- 45
- 67
5
votes
0 answers
Can't import css as string when using MiniCssExtractPlugin
I'm using webpack. I need to load a css file as a string and I'm able to do so with css-loader, but I also need to use MiniCssExtractPlugin to inject css directly into the DOM. If I use MiniCssExtractPlugin, though, when I try to import a css I…

shin
- 333
- 3
- 11
5
votes
1 answer
extract-text-webpack-plugin replacement in webpack 5
I'm working on the project upgrading from webpack 3 to webpack 5. In the project, it was using raw-loader and extract-text-webpack-plugin to parse imported html file(angular component), then combine all html files and output one single html. Here is…

Oleyeye
- 71
- 1
- 3
5
votes
1 answer
How do I configure mini-css-extract-plugin in Gatsby?
The problem
When I run npm run build in my Gatsby project, I'm getting multiple warnings of the same kind:
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css…

Robert Kusznier
- 6,471
- 9
- 50
- 71
5
votes
0 answers
TypeError: Cannot read property 'createHash' of undefined
This is an error regarding ionic, I have just upgraded from IONIC 4 to IONIC 5. I have also upgraded my nodejs to latest version 12.16.4. Now I am getting error while performing ionic serve on my ionic projects. Could you please help me out in this…

Sayen Dutta
- 81
- 4
5
votes
1 answer
Webpack generates js files with css / scss files
Description
In webpack I am using mini-css-extract-plugin:
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[name].[hash].css',
})
]
To load scss files in chunk files:
{
test: /\.scss$/,
use: [
…

Andreas Richter
- 738
- 6
- 20
5
votes
1 answer
CSS not added to /dist folder using Webpack 4 and MiniCssExtractPlugin
Issue
Would any Webpack config experts out there be able to tell me why I can't extract my css into the dist folder when running npm run build?
Repo is here: https://github.com/damodog/webpack4-boilerplate
Further info
To summarise, I've been…

Damodog
- 344
- 1
- 5
- 15
5
votes
1 answer
How to output multiple CSS files from single JS file in Webpack 4?
In my js file 'example.js' I want to import two .scss files 'example.scss' and 'example.m.scss' for desktop and mobile version of website respectively. So I need three outputs - example.js, example.scss and example.m.scss. How I can achieve it in…

Molarro
- 1,005
- 1
- 10
- 24
5
votes
0 answers
Webpack mini-css-extract-plugin not loading main css bundle
I'm extracting the css of my application with mini-css-extract-plugin. It does work, as it's extracting and splitting the css correctly of my imported components correctly. It also extracts to 'main.css', in which are the styles from modules that…

Ashwin
- 939
- 7
- 14
5
votes
2 answers
MiniCssExtractPlugin is garbling and obfuscating my class names
I am using MiniCssExtractPlugin in my typescript and webpack project.
My webpack config for the MiniCssExtractPlugin looks like
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin =…

Knows Not Much
- 30,395
- 60
- 197
- 373
4
votes
2 answers
Extracting all CSS in a single file in Nextjs using mini-css-extract-plugin
I'm using Nextjs and for style, Sass is used. In production mode, I see a lot of css files that are loaded in a sequential manner. I want to load just one css. After some search, I find MiniCssExtractPlugin that can be useful and use in…

amin71
- 89
- 9
4
votes
2 answers
Webpack is importing CSS of other bundles
I have a Webpack setting to build different bundles and put all the CSS used by the bundle in a CSS file.
The problem is that Webpack is putting all the CSS of all the bundles together.
Mi project is configured in the following…

David Minaya
- 129
- 1
- 8
4
votes
1 answer
How to fix hmr for css in mini-css-extract-plugin?
I have simple webpack config for my js app, which is include mini-css-extract-plugin with 'hot-module-reloading'.
I faced a problem. hmr works 1 or 2 times (refreshing page while dev mode) and just stop working. Why?
My "plugins" field in…

yurkimus
- 61
- 4
4
votes
2 answers
mini-css-extract-plugin generates two additional JS files
I'm using the following webpack.config.js file to build two CSS files (editor.css and style.css) and a JS file (block.build.js) making use of the mini-css-extract-plugin plugin:
// Load webpack for use of certain webpack tools and methods
const…

leemon
- 917
- 4
- 19
- 47