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
2 answers
Why Bootstrap CSS is being bundled together with Javascript when using MiniCssExtractPlugin?
I'm trying to generate the vendors CSS and Javascript, but something is going wrong. The vendor Css is being included in both Css and Javascript bundle.
Here's my webpack configuration:
module.exports = (env) => {
const optimization = {
…
Sandro Simas
- 1,268
- 3
- 21
- 35
1
vote
0 answers
How to load local CSS with react-styleguidist 7 and Webpack 4
I want to load local 3rd party css (eg font-awesome icons) as part of my styleguide. As many components uses the same CSS, I want it to be loaded automatically and included as part of the static build.
I settled on using mini-css-extract-plugin to…
bugzpodder
- 29
- 1
- 6
0
votes
0 answers
Issue with Integrating Yjs and Monaco-Editor in Angular - Error with Webpack CSS Dependencies
I'm working on an Angular project where I'm trying to implement a collaborative text editor. The libraries I'm using are monaco-editor and Yjs.
I managed to import monaco-editor into Angular by following the documentation of a certain wrapper, but…
0
votes
0 answers
Why 'css-minimizer-webpack-plugin' or 'postcss-csso' is truncating comma from font shorthand assignment?
I am using mini-css-extract-plugin, css-minimizer-webpack-plugin and postcss-csso for my CSS minification.
Here is my package.json:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
…
Karthi
- 23
- 4
0
votes
0 answers
webpack not generating css from less files
package.json
{
"name": "web20",
"version": "1.0.0",
"description": "Grunt tasks",
"scripts": {
"lint": "eslint-nibble WebContent/src/_common/**/*.js WebContent/src/account/**/*.js WebContent/src/advisor/**/*.js…
sreejith
- 1
0
votes
2 answers
Fonts via mini-css-extract-plugin
I'm not sure, but empirically found out that it seems minicssextractor breaks the paths to fonts written in css @foont-face
@font-face {
font-family: 'Waiting-for-the-Sunrise';
font-style: normal;
font-weight: 400;
src:…
Evgeniy
- 1
- 2
0
votes
0 answers
Webpack (mini-css-extract-plugin) Error: Multiple chunks emit assets to the same filename app.js (chunks src and css)
I've been toiling with this for a while, and even with the broadly unintelligible structure of webpack, I can't find any guidance on how this is supposed to work.
Context:
I have multiple JS files and multiple CSS files. I want to combine them for…
Jason Polites
- 5,571
- 3
- 25
- 24
0
votes
0 answers
Modify chunk filename at runtime (similar to __webpack_get_script_filename__) but for CSS chunks created with mini-css-extract-plugin
Today I'm using webpack_get_script_filename to rewrite the chunk filenames at runtime. This works great for JS files, but it doesn't apply to CSS chunks created with mini-css-extract-plugin . I need to be able to change the css chunk filenames at…
0
votes
0 answers
MiniCssExtractorPlugin not generating CSS from SCSS
I want to generate a file public/stylesheets/main.css from a file at styles/main.scss. It is my understanding that MiniCssExtractorPlugin can do this; however, with my current configuration, no CSS file is generated.
styles/main.css
@import…
Renze
- 96
- 13
0
votes
0 answers
Getting an error during webpack build while using CSS modules
Error
1 | // extracted by mini-css-extract-plugin
2 | export default {"lala":"hQupzgS9tEJmjp6wWbAk"};
(lala is classname)
CSS modules is working fine and changes are reflecting during development but build is failing.
I tried updating…
Vishwesh Bajpai
- 3
- 2
0
votes
1 answer
Modify @wordpress/scripts MiniCssExtractPlugin settings with webpack.config.js
I'm using the @wordpress/scripts package and I want to modify the output of the css files to make them go into a subfolder called css. How do I either remove the original MiniCssExtractPlugin settings or modify the original settings made in the…
Fredrik Vestin
- 1
- 1
0
votes
0 answers
webpack sass-loader includes |0 to the name
Sample file name : ZAScheduler.scss|0.83042b4e1e6767991123.css
loader : MiniCssExtractPlugin.loader
Plugin defined as :
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
{
loader:…
ram kumar
- 13
- 2
0
votes
0 answers
Webpack generating random file name for css included in JS file
I am using webpack for bundling js & css files, i am including css import in my js file,
Page1.js
import ('../css/page1.css');
import ('../css/welcome.css');
window.page1_func1 = () => {
console.log("page 1 function 1…
java_baba
- 73
- 7
0
votes
0 answers
TypeError: MiniCssExtractPlugin is not a constructor V2.7.0
When trying to run my webpack.config,js and i try to call MiniCssExtractPlugin i get an error saying TypeError: MiniCssExtractPlugin is not a constructor.
i have looked around and see most people have this issue, but it was fixed.
however i am using…
Gamzee
- 11
- 2
0
votes
0 answers
Less localidentname hash import name another file
In webpack, css-loader I use localIdentName hash:base64:10 to "hide" real class names.
I have also some global components to put inside DOM structure page.
But, sometimes I need change style component form parent. When I use explicit class names…
Peter
- 499
- 10
- 30