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
4
votes
0 answers
Inject webpack separated css file into html head
In my current setup, webpack bundles css that has been imported in .js files into a separate style file and loads it after the .js bundle has finished loading. Because the .js bundle is loaded after html (end of /body tag), the page does not…
Heiki
- 129
- 1
- 10
4
votes
2 answers
How use the mini-css-extract-plugin to combine imported css and css generated from scss in a single file?
I'm using Webpack 4 and the mini-css-extract-plugin in a php application. I keep all the css styles I've written in scss files but, in some cases, when I import an external library, I import its css in the script where I use it. My end goal would be…
Carlo
- 4,016
- 7
- 44
- 65
3
votes
0 answers
React/mini-css-extract-plugin conflicting import order error: Verbose build logs?
I'm working on a CRA react app and I've recently come across some CSS import order warnings from mini-css-extract-plugin:
chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css…
yhghy
- 141
- 2
- 10
3
votes
0 answers
Webpack 5 & sass: mini-css-extract-plugin cannot resolve fonts
There is my extremly simple test.scss file:
@font-face {
font-family: Roboto;
src: url("../fonts/Roboto/Roboto-Regular.ttf");
font-weight: 400;
}
.test {
display: flex;
font-family: Roboto;
}
And this is my webpack…
michaelT
- 1,533
- 12
- 41
3
votes
0 answers
webpack html-loader and MiniCssExtractPlugin
I'm using setup from getting-started webpack page:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
…
Bojan Vukasovic
- 2,054
- 22
- 43
3
votes
0 answers
mini-css-extract-plugin does not load css if it is not declared via dynamic import
I have very basic webpack + mini-css-extract-plugin project (you can found it here).
Here is webpack.config.js:
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
resolve: {
…
SergeyP
- 429
- 5
- 8
3
votes
0 answers
Webpack @import order (scss, css) is not kept
Current Result
SimpleBar
Bootstrap
Main
Desired Result
Bootstrap
SimpleBar
Main
It seems that the ".css" files are bundled first.
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin =…
user557108
- 1,195
- 3
- 17
- 26
3
votes
0 answers
CSS-modules for similarly named react components have clashing styles
I've recently upgrade my webpack version from 3 to 4.x. Since then, I've noticed that I'm having some style collisions under certain circumstances.
For instance, I have two different components named PlanCard that are in two different directories…
wheresmyspaceship
- 870
- 2
- 12
- 19
3
votes
0 answers
Webpack generates unexpected JS file when building CSS
When building SASS/SCSS files directly with webpack 4 in combination with the MiniCssExtractPlugin 2 files are emitted: the expected CSS output but also a JavaScript file.
I use the CSS files as entry points (not importing them from JS source). I'm…
jneuendorf
- 402
- 6
- 18
3
votes
4 answers
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
We are migrating CSS-loader from v0.28.11 to v3.1.0
We have 2 projects:
Project A- No component dependency on any other project - (containing some components)
Project B - We are importing Project A as node modules
We are able to run and build…
Bhushankumar Pawar
- 61
- 1
- 1
- 4
3
votes
0 answers
Error: Cannot find module '../../node_modules/css-loader/dist/runtime/api.js'
I'm trying to extract the Webpack styles into a .css file using the mini-css-extract-plugin. I'm getting an error stating that it cannot find the module.
ERROR in ./Common/Login/login.min.css
Module build failed (from…
jeffjenx
- 17,041
- 6
- 57
- 99
3
votes
0 answers
MiniCssExtractPlugin + SplitChunksPlugin doesn't put scoped css into bundle
I'm using a Webpack 4 setup, where I'm trying to get all my css into a single bundle, including my scoped css from .vue files. I'm using MiniCssExtractPlugin to extract the css from the files and SplitChunksPlugin to bundle all the css into a single…
Kris D. J.
- 612
- 2
- 7
- 16
3
votes
1 answer
Vue SFC styles not being extracted in webpack production build
Trying to add vue (and SFCs) to my webpack app. The and