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 conditional css filename output dependent on entry name
I have the following config for my webpack which all works and creates css files with a content hash appended to the filenames:
entry: {
main: 'js/main',
checkout: 'js/checkout',
iframe: 'js/iframe',
},
plugins: [
new MiniCssExtractPlugin({
…
Pete
- 57,112
- 28
- 117
- 166
1
vote
0 answers
Need help for webpack configuration of css files as its not refreshing when changing anything in css file
I am using webpack 4.
i have a webpack configuration in my project where anything i change in css/scss files it is not taking effect in browser untill i stop and restart my frontend server. I am using reactjs, jquery and others in my projects.
my…
user12893845
- 176
- 2
- 13
1
vote
1 answer
mini-css-extract-plugin throws Module parse failed: Unexpected character '@' error on @font-face in css file
I am using mini-css-extract-plugin with Webpack 4 like such:
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name:…
volume one
- 6,800
- 13
- 67
- 146
1
vote
1 answer
Webpack style-loader vs mini-css-extract-plugin
Update
After writing these sentences I gave myself the answer. With style-loader i do not need to build first, i can even checkout my repository and start webpack-dev-server. Is this correct?
However, second question is remaining.
I've got a…
Theiaz
- 568
- 6
- 24
1
vote
0 answers
How to automatically add css imports in all generated html files?
I'm generating multiples *.html files in the dist folder of my project (copied with file-loader). The import of styles.css (generated from scss files from my src folder) is present in the generated index.html but not in the other generated html…
Pieber
- 393
- 2
- 7
- 13
1
vote
0 answers
Minimize SCSS to CSS with webpack keeping file/folder structure
I am having trouble understanding how to compile and minify my scss files to css, while keeping the same folder and file structure. I am using MiniCssExtractPlugin to extract everything, as well as style-loader, css-loader, postcss-loader, and…
jobiin
- 449
- 2
- 5
- 12
1
vote
1 answer
WARNING in Conflict: Multiple assets emit different content to the same filename vendor_styles.js.map
I'm gettin these two warnings in my webpack output:
WARNING in Conflict: Multiple assets emit different content to the
same filename custom_styles.js.map
WARNING in Conflict: Multiple assets emit different content to the
same filename…
Batman
- 5,563
- 18
- 79
- 155
1
vote
2 answers
How to properly handle css-files by mini-css-extract-plugin in webpack 4?
There is a simple config for webpack 4
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
output: {
filename:…
DazzRune
- 11
- 4
1
vote
1 answer
How to split css from the style.css using MiniCssExtractPlugin?
I'm trying to transform two of my .scss files into two different .css files: one called timer_player.css and another called style.css.
The style.css can't have any style of timer_player.css.
With ExtractTextPlugin I can to this by creating two…
Mateus Luiz
- 756
- 7
- 20
1
vote
1 answer
Webpack 4 import SCSS file in bad order
I use Webpack 4.35.3 to compile my assets.
I've an application.js file who's my entry point:
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'popper.js';
import 'bootstrap';
import '../stylesheets/application.scss';
I've an…
pirmax
- 2,054
- 8
- 36
- 69
1
vote
0 answers
How to configure webpack to compile sass files into specified directory
I'm trying to configure webpack to compile scss files into /dist/css folder. I don't want to bundle css with js. But I'm getting an error.
What am I doing wrong?
I tried to reinstall webpack and npm rebuild node-sass but it doesn't work for me.
My…
Laston
- 71
- 4
1
vote
0 answers
Why does Webpack rebuild JS on CSS changes?
I use mini-css-extract-plugin, css-loader and sass-loader.
Output on CSS change:
Built at: 06/07/2019 7:37:09 PM
Asset Size Chunks Chunk Names
vendor.css 174 KiB vendor [emitted] …
ilyazub
- 1,226
- 13
- 23
1
vote
0 answers
How to get reference to css file from mini-css-extract-plugin in entry file
I'm using mini-css-extract-plugin in my webpack project. The configuration is primitive:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins.push(new MiniCssExtractPlugin());
sasscPlugins = [
…
deathangel908
- 8,601
- 8
- 47
- 81
1
vote
1 answer
webpack4 mini-css-extract-plugin with bourbon
I have my scss file which imports a scss file which further imports bourbon and bourbon-neat. I even searched various issues on the forum but did not find the issue where in the scsss to css conversion, the case is to include bourbon.
webpack…
Rajesh Dwivedi
- 382
- 2
- 13
1
vote
1 answer
Nuxt - Custom icon-font not served from _nuxt folder
I have successfully used the webfonts-loader package to generate a font and class-definitions for icons, but it isn't served by my nuxt dev server. There is a styletag in my head with:
@font-face {
font-family: "TopLoggerIcons";
src:…
Raymundus
- 2,173
- 1
- 20
- 35