Questions tagged [webpack-style-loader]
461 questions
11
votes
2 answers
How to ensure that hot CSS loads before JS in webpack-dev-server?
I'm using webpack-dev-server to hot load all of my assets including CSS. Currently though, my CSS loads after the JavaScript which causes my application issues in some places that depend on layout existing.
How can I ensure that the CSS loads…
Elise Chant
- 5,048
- 3
- 29
- 36
11
votes
1 answer
Webpack: Must i specify the domain in publicPath for url() directive to work in CSS?
My problem is that if I don't specify the complete domain in output.publicPath config option; then the url don't load properly (at least fonts).
My webpack config:
output: {
...
publicPath: '/assets/'
},
module: {
loaders: {
{
…
mcortesi
- 256
- 2
- 7
10
votes
2 answers
How can I use style-loader in react SSR (Server Side Rendering)?
As you know, we can easily use style-loader to add our styles to our react project, but the window is not available in Server Side Rendering, so how I can use style-loader (or something instead of that in SSR project)?
When I use style-loader, it…
Pouya Jabbarisani
- 1,084
- 3
- 16
- 29
10
votes
3 answers
How can I set a CSS name not to be a hash in a Webpack configuration file?
I just wondering why my CSS name became hash after I build and run my React + Webpack application. Is there advance configuration that I may have missed to set the CSS name as normal?
This is my Webpack configuration:
var webpack =…
Rido
- 717
- 4
- 10
- 23
10
votes
2 answers
webpack not generating css file
Implementing webpack asset management tutorial .but webpack is not generating css file in output path
webpack.config.js
const config = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/build'
},
module:…
vijay
- 10,276
- 11
- 64
- 79
10
votes
5 answers
Webpack 2: WARNING in .png, .svg, .. DEPRECATED. Configure optipng's optimizationLevel option in it's own options. (optipng.optimizationLevel)
This WARNING is printed ~20 times when running webpack - it processes and bundles just fine, but what does it mean? How do I get rid of it?
Googling around provides little to no help unfortunately.
Here's my webpack config:
const ExtractTextPlugin =…
cbll
- 6,499
- 26
- 74
- 117
10
votes
2 answers
webpack Can't resolve 'style'
I was trying to follow the simple Getting Started from (http://webpack.github.io/docs/tutorials/getting-started/).
And I am getting this error when I try to load style.css.
ERROR in ./entry.js
Module not found: Error: Can't resolve 'style' in 'Path…
Ravi
- 323
- 2
- 6
- 18
9
votes
1 answer
How to load css provided by webpack inside an IFrame created using "react-frame-component" library?
I'm trying to render my React component inside an iframe. I got it to work by using the library "react-frame-component". The problem is that the styles are loaded outside the iframe, at the end of "head" element. I want to change it to be loaded…
Sandro Simas
- 1,268
- 3
- 21
- 35
9
votes
1 answer
Unable to inline styles with `sass-loader`
I have a project setup where I use ExtractTextPlugin to create a CSS file. I'm trying to create a dev Webpack config with the styles injected onto the page using style-loader, css-loader, and sass-loader.
As far as I am aware the default behaviour…
JmJ
- 1,989
- 3
- 29
- 51
9
votes
1 answer
How to configure webpack to generate multiple CSS theme files?
I have multiple theme files, which are basically SASS files with different variables that specify colors, fonts etc. specific to each theme. The rest of the SASS files in the project use these variables in their CSS rules.
I would like to configure…
Yoav Kadosh
- 4,807
- 4
- 39
- 56
9
votes
1 answer
How to debug CSS bundled by Webpack?
I've switched from including stylesheets the oldschool way:
to Webpack approach:
var css = require('./../css/main.css');
It works, but I don't like that it extracts the css from this file into…
van_folmert
- 4,257
- 10
- 44
- 89
9
votes
4 answers
Cannot make bootstrap work with Webpack
I am working with a webpack-dev-server and I am trying to include bootstrap.
I have this project structure:
── css
│ └── bootstrap.min.css
│── js
| └── bootstrap.min.js
├── dist
├── index.html
├── package.json
├── server.js
├── src
│ ├──…
lhahn
- 1,241
- 2
- 14
- 40
8
votes
1 answer
How to move css-in-js (Styled Components) to an external css files during build using webpack - ReactJS
I am trying to figure out where the CSS files are residing when I build the react project. I am using webpack and I am able to make a single CSS file for all the styles used throughout the project if I use normal CSS. When I use CSS in js using…
Mohamed Imran
- 651
- 7
- 20
8
votes
1 answer
Invalid Property Value on css style using imported css file in react
I am trying to style a React Component. To achieve this, I am importing a css file and using className such as indicated in ReactJs Documentation.
I have added a css-loader + style-loader to my webpack.config.js file as described below :
const path…
Jaro
- 1,587
- 5
- 20
- 39
8
votes
1 answer
how tell to webpack to use plugin or loader only for specific file?
I want to force the webpack to enable specific plugin or loader for certain file/folder, multiply files. Is there a way?
newnewnews
- 123
- 1
- 5