Questions tagged [mini-css-extract-plugin]

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.

mini-css-extract-plugin github

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…
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…
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…
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…
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
1 2
3
12 13