Questions tagged [extracttextwebpackplugin]

76 questions
12
votes
1 answer

Using css modules with Extract Text Plugin

Webpack 2 build doesn't work as expected in production mode using css modules option in css-loader with extract-text-webpack-plugin. the correct generated classes are created on html elements, implying that css-loader is working as intended, but the…
11
votes
1 answer

Output 2 (or more) .css files with mini-css-extract-plugin in webpack

When using webpack 2(or 3), I could write code like: const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css'); const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css'); rules: [ { test: /\.scss$|\.css$/, …
11
votes
1 answer

How to extract critical (above the fold) CSS from each entry?

I have a simple multi-page app with three pages, my webpack.config.js entry looks like: { entry: { a: 'pages/a.js', b: 'pages/b.js', c: 'pages/c.js', } } Each page consists of several React components, some of which are visible…
wilsonpage
  • 17,341
  • 23
  • 103
  • 147
11
votes
2 answers

Unable to HMR (Hot Module Replacement) css/scss with Webpack 2.2.0 and webpack-dev-server 2.2.1

Versions "extract-text-webpack-plugin": "^2.0.0-rc.2", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.1" Issue "extract-text-webpack-plugin": "^1.0.1", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" No longer able to HMR css/scss since…
7
votes
2 answers

Webpack Plugin: How to add dynamically a Module to the main Chunk?

I'm working on a Webpack plugin that basically looks for a css assets inside the chunks, when it founds such asset, applies on it some postCSS plugin that returns 2 outputs, the one should continue to be extracted using Extract-Text-Plugin and the…
felixmosh
  • 32,615
  • 9
  • 69
  • 88
6
votes
2 answers

Entrypoint undefined = extract-text-webpack-plugin-output-filename in webpack 4?

I extracted css using extract-text-webpack-plugin in webpack 4. The CSS is exctacted but when i run npm run build , the css is extracted but i get a message on screen saying Entrypoint undefined = extract-text-webpack-plugin-output-filename. The…
6
votes
1 answer

extracting one css file per webpack chunk (require.ensure)

While trying to implement page optimizations in our app, we want to have ability to generate separate CSS files per webpack chunk to improve page rendering performance for first page in our application. To achieve that, we have been trying to use…
5
votes
1 answer

extract-text-webpack-plugin replacement in webpack 5

I'm working on the project upgrading from webpack 3 to webpack 5. In the project, it was using raw-loader and extract-text-webpack-plugin to parse imported html file(angular component), then combine all html files and output one single html. Here is…
4
votes
0 answers

Inject webpack separated css file into html head

In my current setup, webpack bundles css that has been imported in .js files into a separate style file and loads it after the .js bundle has finished loading. Because the .js bundle is loaded after html (end of /body tag), the page does not…
4
votes
1 answer

extract-text-webpack-plugin does not create CSS file

I have webpack.config.js that creates bundle.js but for some reason it does not create any css file although I have css-loader, style-loader and extract-text-webpack-plugin. my webpack.config.js const path = require('path'); const HtmlWebpackPlugin…
3
votes
1 answer

Access generated css in webpack plugin using style-loader

I've a written a webpack plugin which reads less source files and then after processing generates a short css which allows to override the color specific styles in browser using less.modifyVars(). Here is a demo…
3
votes
0 answers

How Can I Inline Importantant CSS while component based CSS loads as file using Webpack 4?

I have a project using Webpack 4 extremely close to the preact-boilerplate repo like so: https://github.com/developit/preact-boilerplate/blob/master/webpack.config.babel.js#L50 Just like how that project is setup, it's using ExtractTextPlugin and…
3
votes
0 answers

Build fails when loading Roboto typeface

Following Material UI's getting started guide, I have installed typeface-roboto in my repository like so: npm install typeface-roboto Index.js is the entry point of my React application: import React from 'react' import { render } from…
Rens Verhage
  • 5,688
  • 4
  • 33
  • 51
3
votes
1 answer

Webpack and PostCSS Autoprefixer not compiling Sass partials

I'm using Webpack to compile Sass and the PostCSS autoprefixer is not working on partials being imported into the style.scss entry point. Adding styles directly to style.scss are being prefixed as expected, yet any file referenced as an @import is…
3
votes
0 answers

webpack extract-text-webpack-plugin ignoreOrder not working

I'm trying to use extract-text-webpack-plugin to generate bundled css file and make it generated in order. Now, CSS file was generated, but "ignoreOrder" seems not working, the content's order doesn't obey source code's order.…
Cony LuLu
  • 69
  • 11
1
2 3 4 5 6