Questions tagged [extract-text-plugin]
121 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…
deckele
- 4,623
- 1
- 19
- 25
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$/,
…
Shevchenko Viktor
- 5,206
- 2
- 17
- 26
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
Webpack plugin to modify files after compilation
I am writing a Webpack plugin that should replace a part of the JS code with a list of Webpack's generated CSS files. Imaging this JS code:
ReactWebComponent.create(
Lukas
- 9,752
- 15
- 76
- 120
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…
Robert Leggett
- 972
- 1
- 8
- 23
8
votes
3 answers
Webpack: ExtractTextPlugin: Not to generate separate empty JS file when have several css entry points?
I have several CSS entry points:
entry: {
...
styles: [
...
],
fonts: [
...
]
},
and I'm using ExtractTextPlugin to bundle CSS separately:
new ExtractTextPlugin({
filename: `[name].bundle.css`
}),
So like output I have 2…
Stepan Suvorov
- 25,118
- 26
- 108
- 176
7
votes
2 answers
CSS Code Splitting with Webpack 2 and React Router
I'm code splitting my JavaScript files with React Router and Webpack 2 like this:
export default {
path: '/',
component: Container,
indexRoute: {
getComponent(location, cb) {
if (isAuthenticated()) {
redirect();
} else…
Matheus Lima
- 2,103
- 3
- 31
- 49
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…
osdev isnot
- 108
- 1
- 5
6
votes
2 answers
Cannot read property 'query' of undefined extract-text-webpack-plugin
I'm trying to implement extract-text-webpack-plugin using webpack 2 and I'm building my webpack.config.js from scratch. When I wanted to add the plugin I followed the instructions on npm. This however gives me the following error:
TypeError: Cannot…
Kevin
- 1,219
- 1
- 16
- 34
5
votes
3 answers
classnames not appearing React
Not Sure where am i going wrong.This is my webpack.prod for bundling client-side. but some how classNames are not appearing in my html
const path = require('path');
const webpack = require('webpack');
const dependencies =…
shubh
- 173
- 4
- 11
5
votes
0 answers
async js chunks that include scss imports cause => Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
There seems to be some issue when importing a scss file in a common chunk if that common chunk also imports an async/dynamic js chunk which imports another scss file.
//===== a.js =====
import './common';
//===== b.js =====
import…
ericsicons
- 1,475
- 3
- 23
- 38
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…
Heiki
- 129
- 1
- 10
4
votes
1 answer
Webpack run both .LESS and .SCSS compilation. Extract text plugin not working on one bundle file
I need to run both LESS and SCSS compilation in the same project output to separate CSS files.
The project was LESS based but now adding SCSS during a transition phase.
I don't want to update webpack for the time being. Webpack runs fine but and…
Kerry7777
- 4,246
- 1
- 18
- 28
4
votes
2 answers
Force compiled CSS inline with Angular & Webpack
Is there a way I can get Webpack to add a compiled SCSS → CSS file to my Angular project's index.html head as an inline style tag?
The goal is to style the "Loading ..." page displayed while Angular is busy bootstrapping. In order to avoid FOUC the…
josef.van.niekerk
- 11,941
- 20
- 97
- 157
4
votes
3 answers
Extract Text Plugin 'loader is used without the corresponding plugin' - React, Sass, Webpack
I'm trying to get SASS compilation running on my React + Webpack project and keep running into this error:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin
Followed the guidelines from this…
Filth
- 3,116
- 14
- 51
- 79