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
10
votes
3 answers
Webpack - MiniCssExtractPlugin doesn't extract file
I've created webpack config to my VueJS project. I want to separate styles from javascript code. I've used mini-css-extract-plugin but finally I receive only bundle.js file. What's wrong with this config and where is a mistake? Is there any missing…
szczepaniakdominik
- 442
- 7
- 24
9
votes
1 answer
Why is [name] always main in MiniCssExtractPlugin for webpack?
In webpack when configuring the MiniCssExtractPlugin, I don't understand why [name] is always "main"?
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/[name].css' // where does the name "main" come from?
})
]
How could…
volume one
- 6,800
- 13
- 67
- 146
9
votes
2 answers
Turn off seperate chunks for css , vue cli 3 webpack 4
I am using a project created with the latest version of vue cli 3 . I am using the default config , My router has many dynamically imported routes . Both my css and js are split into multiple chunk while running in production .
While the behaviour…
Sainath S.R
- 3,074
- 9
- 41
- 72
9
votes
0 answers
How to extract css from multiple components into a single file with vue cli 3?
This is what I have tried in my vue.config.js:
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks:…
Oswaldo
- 3,296
- 4
- 25
- 35
8
votes
5 answers
How to skip Javascript output in Webpack 4?
I use Webpack 4 in a project where I only need to compile and bundle styles so far. There's no Javascript.
Here's the config I have:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
…
rishat
- 8,206
- 4
- 44
- 69
7
votes
1 answer
Webpack erroring on mini-css-extract-plugin loader
When I try to use the loader for mini-css-extract-plugin webpack returns the following error:
/node_modules/mini-css-extract-plugin/dist/loader.js:122
for (const asset of compilation.getAssets()) {
^
…
kdub1312
- 803
- 2
- 9
- 19
7
votes
2 answers
Webpack mini-css-extract-plugin @font-face url resolution issue
I am facing difficulty understanding the nature of URLs/paths and how they are resolved while using the mini-css-extract-plugin, file-loader and configuring their options such as the context and filename properties.
I am developing a custom theme…
nooberson
- 71
- 1
- 4
7
votes
1 answer
How to emit CSS chunk for styles from HTMLWebpackPlugin chunk?
I'm trying to use CSS modules for html, produced by html-webpack-plugin.
Code to reproduce error
src/index.ejs
src/styles.css
.foo {
color: red
}
This code, bundled with following config is…
Lesha Ogonkov
- 1,218
- 8
- 20
7
votes
2 answers
How can I control the order of CSS with MiniCssExtractPlugin?
{
test: /\.module\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
{
loader: 'css-loader',
options: {
modules: { localIdentName:…
kgrubb
- 71
- 1
- 3
7
votes
2 answers
webpack 4: Create multiple theme css files
I need to create multiple theme CSS files using webpack version 4 and "mini CSS extract plugin" in my react project. Depends on a place where webpack will find an import of the SCSS file, it should use loader twice - with different data in…
Avrel Dusop
- 135
- 3
- 11
7
votes
1 answer
Webpack 4 with Less and MiniCssExtractPlugin using entries
I have following structure for styles in my application:
application
- css/
- bootstrap/
- boostrap.less -> has (@import "another.less")
- another.less
- common/
- common.less
- entries/
- bootstrap.js -> has…
Rafal Cypcer
- 557
- 1
- 5
- 17
7
votes
0 answers
Duplicated css files using webpack MiniCssExtractPlugin and OptimizeCSSAssetsPlugin
I'm getting this problem of duplicated css files under dist/css
My webpack configuration is as follows:
webpack.base.config.js
/* eslint quote-props: ['off'] */
'use strict'
const path = require('path')
const utils = require('./utils')
const…
Javier Muñoz Tous
- 151
- 1
- 7
6
votes
0 answers
You forgot to add 'mini-css-extract-plugin' plugin
I'm using mini-css-extract-plugin in my webpack, version 1.3.6 but when trying to run dev build getting the below error. css and scss both are in the app.
ERROR in ./src/index.css
Module build failed (from…
manisha_manoj
- 83
- 2
- 7
6
votes
1 answer
How to set the configuration of mini-css-extract-plugin in vue.config.js generated by vue-cli
I have a fairly large Vue project that was initially created with vue-cli. I'm getting the infamous "couldn't fulfill desired order of chunk group(s)" warning when building. After much searching, I think the solution is to add ignoreOrder to the…
Paulie
- 1,940
- 3
- 20
- 34
6
votes
2 answers
MiniCssExtractPlugin doesn't link with my html file
When i Webpack my project using MiniCssExtractPlugin to separate css into files, it creates the main.css file but never write the link into my html file.
Here is my webpack.config.js :
const webpack = require("webpack");
const path =…
jska13
- 147
- 3
- 11