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
1
vote
1 answer
Webpack bundled styles are not being extracted to css files
getting a little beat up here by webpack and setting it up. For the most part I think I have everything set up correctly but I am not sure what I am missing that will enable my styles to be extracted into .css files rather than being bundled into…
Galactic Ranger
- 851
- 3
- 14
- 30
1
vote
0 answers
Webpack 4, vuejs, mini-css-extract-plugin, sass-loader, source-map issue
Hi,
I try to compile in global file (in style.css) my style from my vue app. We use SASS (scss) with Webpack 4.
The probleme :
The source-map generated with my actual conf, was totally wrong! I try to path this with SourceMapDevToolPlugin from…
darkiron
- 1,174
- 1
- 10
- 20
1
vote
0 answers
Webpack MiniCSSExtractPlugin: cacheGroups depending on import file name
I'm looking for help with MiniCSSExtractPlugin and the cacheGroups feature.
I have a single JavaScript entry file index.js which imports 2 Sass files like so:
import './style.scss'
import './editor.scss'
What I'd like to end up with is two CSS…
Brett Mason
- 11
- 2
1
vote
0 answers
Server-side webpack not able to read css file from node_modules
I'm trying to create one component using react-responsive-carousel.
But getting below message when trying to build the code for Server side. For Client Side, MiniCssExtract loader is able to read this css file:
.carousel .control-arrow,…
smartSoc
- 11
- 3
1
vote
0 answers
webpack.config.js : Unexpected character '@'
I'm trying to create a code that will serve as a reference for my next projects.
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const…
Bruno Croner
- 35
- 5
1
vote
1 answer
Webpack 4: How to extract CSS from Node module?
How can I extract the CSS from a compiled JS file into my own application.css? I want to detail this question by using an example:
Using Webpack 4, Rails webpacker and Vue.js I have built a SPA. I have added the external Vue component…
Georg Ledermann
- 2,712
- 4
- 31
- 35
1
vote
1 answer
Webpack mini-css-extract-plugin using query string in file name for cache busting not working
I am using WebPack in .Net Mvc project (with .cshtml views) and I want to output all files with query string content hash numbers. I am using Mini Css Extract Plugin. So far i couldn't get the desired result.
For filename here is my…
Erdal SATIK
- 652
- 2
- 9
- 32
1
vote
0 answers
Webpack - Setting up relative path with mini-css-extract-plugin
In order to output my css file using mini-css-extract-plugin to a directory I did something like the following:
context: path.resolve(__dirname, "src"),
entry: {
"main": "./js/index.js"
},
output: {
path: path.resolve(__dirname,…
Sineau
- 66
- 5
1
vote
1 answer
Extract local and global styles with mini-css-extract-plugin
Until now I have been using extract-text-webpack-plugin and webpack 3 to make two bundle files. One for local styles and one for gloabl styles.
So in global styles file we would extract css from like bootstrap, semantic ... and in local styles…
Igor-Vuk
- 3,551
- 7
- 30
- 65
1
vote
2 answers
Webpack and MiniCssExtractPlugin does not bundle CSS files
I am trying to follow the manual here: https://webpack.js.org/plugins/mini-css-extract-plugin/
My config is exactly as stated there. My goal is to produce a single CSS file which is a bundle of multiple CSS files that are located in the src/css/…
user6269864
1
vote
1 answer
Webpack 4: naming the CSS files
When it comes to naming the CSS files generated with MiniCssExtractPlugin, There are two different recommendation of how to name them:
First Example:
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename:…
user1941537
- 6,097
- 14
- 52
- 99
1
vote
1 answer
Webpack4 with sass-loader, MiniCssExtractPlugin and uikit
I´m trying to setup a uitkit template with
webpack 4
sass loader
MiniCssExtractPlugin
uikit
What I would like to achieve is that a build automatically converts sass to css and that resulting css is injected into…
toni
- 443
- 5
- 14
1
vote
1 answer
splitChunks-> cacheGroups css compilation silently fail to execute code in output ( provided demo-repository )
I've build a sample minimal-demo repository : https://github.com/fvigotti/webpack-errordemo
the problem is that when I add this (
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
…
francesco
- 309
- 1
- 16
1
vote
1 answer
Webpack-4 MiniCssExtractPlugin splitChunks
I'm trying to get the Webpack-4 splitChunks optimization to do this:
Put all JS&CSS not in any entry point but used more than once into common files (CSS & JS).
Combine all CSS produced by the MiniCssExtractPlugin from Vue components into the same…
philw
- 661
- 10
- 20
1
vote
2 answers
Webpack Config: Querying the mode option within plugin creation
How would I go about querying the mode within my webpack.config.js configuration file?
Here's what I want to do. I have the mode set in my webpack config:
module.exports = {
mode: 'development'
}
When I initialize the mini-css-extract-plugin I…
Daniel D
- 121
- 6