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
39
votes
5 answers
mini-css-extract-plugin WARNING in chunk chunkName [mini-css-extract-plugin] Conflicting order between:
WARNING in chunk AccessRights~Groups~Navigator [mini-css-extract-plugin]
Conflicting order between:
css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Icon/_circle/Icon_circle.scss
css…
sevaTechnoPark
- 401
- 1
- 4
- 3
26
votes
2 answers
How to specify output directory with "mini-css-extract-plugin"?
I am using the mini-css-extract-plugin to extract the CSS from a bundle to a file. I need to drop that file in a different place in the filesystem.
How do I configure the mini-css-extract-plugin to drop the CSS file to a different path than the JS…
TerribleDev
- 2,195
- 1
- 19
- 31
20
votes
1 answer
How to remove unused CSS using webpack 4?
I am having problem removing unused CSS in webpack 4. It seems that most of the CSS purification plugins are dependent on extract text plugin which is not updated for version 4.
Here's my commands:
node_modules/.bin/webpack --mode=development…
Hamed
- 1,351
- 9
- 23
17
votes
1 answer
What is the Purpose of chunkFilename of mini-css-extract-plugin Module?
I'm using mini-css-extract-plugin module now, and setting its chunkFilename value and make sure the value of "[id].css" by running it.
However, I couldn't see the file.
The reference is…
diveintohacking
- 4,783
- 6
- 29
- 43
17
votes
1 answer
MiniCssExtractPlugin public path not working
I am using MiniCssExtractPlugin to lazyload CSS files in my React application.
I have given publicPath option for MiniCssExtractPlugin but it is not taking this option value, it is taking output.publicPath option.
config: {
test: /\.(css)?$/,
…
Nithish
- 369
- 1
- 8
- 20
14
votes
6 answers
Webpack 4: mini-css-extract-plugin + file-loader not loading assets
I'm trying to move assets (images and fonts) used in one of my .scssfiles, but it seems that they get ignored:
This is my .scss file:
@font-face {
font-family: 'myfont';
src: url('../../assets/fonts/myfont.ttf') format('truetype');
…
danielrvt
- 10,177
- 20
- 80
- 121
13
votes
3 answers
webpack mini-css-extract-plugin => output multiple css-files on single entry
How can I setup webpack for my gutenberg blocks to extract multiple css files and bundle these based on the name of the stylesheets.
Zack Gordon used the Extract Text Plugin for this with webpack 3, and that worked like a charm. But with webpack 4 I…
Bornie
- 311
- 1
- 2
- 11
12
votes
3 answers
How to get mini-css-extract-plugin to work with webpack 5?
I am trying to extract the css files in my library. I've read the way to do this is using mini-css-extract-plugin.
Am I doing something wrong? Is there another way to extract the css files for my library?
Below I've created a simple test project…
longlostbro
- 528
- 2
- 7
- 24
12
votes
3 answers
using mini-css-extract-plugin and style-loader together
I am new to that webpack thing and following some tutorials to learn basics.
I would like to use style-loader to inject stylesheets during development (with HMR enabled) and want to use MiniCssExtractPlugin for production builds. But when I use…
spetsnaz
- 1,181
- 1
- 14
- 11
11
votes
2 answers
Getting error on running command `npm run build`, error `TypeError: MiniCssExtractPlugin is not a constructor`
I'm creating an app using react it runs fine on npm start but when I try to build the app, this show the following error.
PS D:\ ****\ **\*\profile> npm run build
> profile@0.1.0 build
> react-scripts build
D:\ ****\…
Mohammad Masood Alam
- 403
- 5
- 14
11
votes
1 answer
Why is CssMinimizerWebpackPlugin preventing my main js file from being minified?
I am using webpack's CssMinimizerWebpackPlugin (docs). I initially configured it as recommended on the documentation
optimization: {
minimize: true,
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing…
Aridez
- 452
- 5
- 17
11
votes
1 answer
mini-css-extract plugin with postcss throws this.getOptions is not a function
I'm trying to set up a tailwind css for my personal project. It's a react SSR application. I'm having an issue with postcss setup under the webpack configuration. It throws the same error on every *.css file (even on the empty ones).
It looks like…
NotAWizzard
- 157
- 1
- 8
11
votes
1 answer
Output 2 (or more) .css files with mini-css-extract-plugin in webpack
When using webpack 2(or 3), I could write code like:
const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');
rules: [
{
test: /\.scss$|\.css$/,
…
Shevchenko Viktor
- 5,206
- 2
- 17
- 26
10
votes
2 answers
Large console output produced by mini-css-extract-plugin
Been trying to research this but it doesn't seem as if any else has this, or see this as an issue.
I am using mini-css-extract-plugin(MiniCssExtractPlugin) in my webpack.config.js.
However, when I run webpack the console is littered with hundreds of…
mcclosa
- 943
- 7
- 29
- 59
10
votes
1 answer
source map's in mini-css-extract-plugin
I can't seem to get source maps to work with the mini-css-extract-plugin. I had them working with style-loader.
devtool: argv.mode === 'development' ? 'eval' : 'none',
[...]
test: /\.scss$|\.css$/i,
use: [
{
loader:…
Nemo64
- 2,535
- 3
- 20
- 24