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
0
votes
0 answers
Webpack css duplicate
I have webpack entry:
// main.js
import './main.css'
And css files:
// main.css
@import "./header.css";
@import "./footer.css";
// header.css
@import "./container.css";
// footer.css
@import "./container.css";
I am using the…
Klim
- 13
- 2
0
votes
1 answer
Webpack 5 mini-css-extract-plugin dropping scss files
I am migrating a webpack config from webpack 4 and am trying to wire in the mini-css-extract-plugin. However, all of my first party app CSS (SCSS) is not being injected into the main app.css file after extraction. If I inspect the file received by…
gabaum10
- 3,769
- 3
- 48
- 89
0
votes
1 answer
taro build show mini-css-extract-plugin warning: Conflicting order. how to solve it?
I start a taro + react project, build show mini-css-extract-plugin warning:
Error: chunk common [mini-css-extract-plugin]
Conflicting order. Following module has been added: ***
how to solve it?
zsytssk
- 702
- 1
- 6
- 14
0
votes
0 answers
Prevent duplicated CSS in dynamic import
I'm using dynamic imports in my webpack project to conditionally include some extra JS and SCSS. There's also a main JS bundle and a main CSS bundle. I want to configure webpack so that my dynamically imported SCSS can depend on the main CSS bundle,…
Sheldor the conqueror
- 1,154
- 9
- 15
0
votes
0 answers
React use css from imported files only
Hi guys I have an issue with my css in the react project
I have a component called header.jsx and the header.scss file is imported in it, so I want the css to be applied from header.scss only not from any other file (even though the className names…
Naruto
- 53
- 8
0
votes
1 answer
Can I access css filename with content hash created by MiniCssExtractPlugin in React App?
I am trying to load dynamically link tag inside a React component with shadow dom, but I can't find a solution to access filename/path with hashes generated by MiniCssExtractPlugin/Webpack.
General idea is to have two+ CSS outputs. First global one…
oct51
- 66
- 5
0
votes
1 answer
Avoid downloading empty JavaScript file when using MiniCssExtractPlugin and async chunks
When using async chunks with MiniCssExtractPlugin, an empty JavaScript file is created. This file is downloaded together with the extracted CSS file. Is there any way to avoid this, i.e. download only the CSS file?
// index.js
const styles = () =>…
Boyan Mihaylovv
- 338
- 2
- 10
0
votes
1 answer
MiniCssExtractPlugin error when I run npm run build
I'm trying to run "Npm Run Build" on my reactjs website, but I keep getting this error:
/usr/local/lib/node_modules/react-scripts/config/webpack.config.js:664
new MiniCssExtractPlugin({
^
TypeError: MiniCssExtractPlugin is not a…
0
votes
1 answer
How to (successfully) bundle css for dynamic multi-page app using Webpack 5
I am trying to use Webpack 5 to bundle assets for a dynamic multi-page Django application. Using WebpackManifestPlugin and django-manifest-loader. I have this working fine for JavaScript, but I've tried every tip I can find and have not been able to…
Steve Jorgensen
- 11,725
- 1
- 33
- 43
0
votes
1 answer
Neither MiniCssExtractPlugin's linkType nor html-webpack-link-type-plugin is working
Please find my webpack config below:
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
const path = require('path');
const webpack = require('webpack');
const FileManagerPlugin =…
Aakash Verma
- 3,705
- 5
- 29
- 66
0
votes
1 answer
mini-css-extract-plugin: Import CSS files ONLY when importing JS files
I'm making a tree shaken component library in React with webpack@5.24.2 and mini-css-extract-plugin@1.3.9 that has to work for client side rendering and server side rendering. I want to be able to do the following, create "N" components in the…
Enrique A Macias
- 11
- 6
0
votes
0 answers
Webpack 5 and mini-css-extract-plugin fails with " TypeError: wellKnownSymbol is not a function"
I'm trying to update a project to Webpack 5. mini-css-extract-plugin causes an error. When I use style-loader instead of mini-css-extract-plugin's loader, my project builds just fine. However, you shouldn't inline your CSS for production…
mrbinky3000
- 4,055
- 8
- 43
- 54
0
votes
1 answer
What is the right way to incude Sass in NextJs?
When I use Sass files in NextJs, I am getting 'conflicting order' warnigs from mini-css-extract-plugin. The conflict always messes up my stylings on build. You can see the error described in the following…
Sachin Titus
- 1,960
- 3
- 23
- 41
0
votes
1 answer
How to generate single css and multiple chunks of the same css in Webpack 4?
I want to generate CSS like this:
In normal chunks used by my web application.
main.css 1.chunk.css 2.chunk.css .... etc
And a single file
server.css
Because I use server.css in backend
I tried to use this…
wilcus
- 739
- 1
- 7
- 17
0
votes
1 answer
webpack/cssnano not compressing all CSS files?
I'm using
webpack 4
postcss-loader
cssnano
mini-css-extract-plugin
The postcss/cssnano config looks like:
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: loader => {
…
mpen
- 272,448
- 266
- 850
- 1,236