Questions tagged [webpack-style-loader]
461 questions
300
votes
5 answers
Webpack style-loader vs css-loader
I have two questions.
1) CSS Loader and Style Loader are two webpack loaders. I couldn't grasp the difference between the two. Why do I have to use two loaders when they both do the same job?
2) What is this .useable.less and .useable.css mentioned…
Anvesh Checka
- 3,787
- 2
- 21
- 28
141
votes
3 answers
What does a `~` tilde in a CSS `url()` do?
E.g. @import url("~./foobar");
Saw it here, not sure if it's some package specific thing or if it's actual CSS syntax.
dontexist
- 5,252
- 4
- 27
- 51
102
votes
10 answers
Error: Cannot resolve module 'style-loader'
I'm using style-loader with webpack and react framework. When I run webpack in terminal i'm getting Module not found: Error: Cannot resolve module 'style-loader' in import.js file although i've specified the file path correctly.
import…
Rahul Dagli
- 4,301
- 15
- 47
- 85
82
votes
3 answers
Import CSS from "node_modules" in Webpack
Some third-party modules I'm using have their own CSS files. I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules" be imported into my CSS file?
For example, I'm using the…
Donald T
- 10,234
- 17
- 63
- 91
61
votes
14 answers
Webpack "OTS parsing error" loading fonts
My webpack config specifies that fonts should be loaded using url-loader, and when I try to view the page using Chrome I get the following error:
OTS parsing error: invalid version tag
Failed to decode downloaded font: [My local URL]
The relevant…
Will Madden
- 6,477
- 5
- 28
- 20
51
votes
2 answers
webpack css-loader not finding images within url() reference in an external stylesheet
I'm new to the whole Node/NPM/Webpack world, so apologies if this is obvious.
I'm attempting to build a simple front-end project bundled with Webpack. I've got node installed, and have a package.json file configured. If I run "npm start" in my root…
hairbo
- 3,113
- 2
- 27
- 34
43
votes
3 answers
webpack loaders and include
I'm new to webpack and I'm trying to understand loaders as well as its properties such as test, loader, include etc.
Here is a sample snippet of webpack.config.js that I found in google.
module: {
loaders: [
{
test: /\.js$/,
…
devwannabe
- 3,160
- 8
- 42
- 79
40
votes
6 answers
Type Error: this.getOptions is not a function For style-loader
Problem
While using Storybook, I am running npm run storybook and getting the error below.
ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
Background/Context
My goal…
Bryan Guillen
- 1,149
- 1
- 7
- 9
39
votes
4 answers
cannot load png files with webpack, unexpected character
Im trying to reconfigure my webpack, and now i cannot load the css files. i keep my styles in src > styles > main.css
I am getting errors such as
ERROR in ./src/images/NavIcon03.png
Module build failed: SyntaxError:…
caffeinescript
- 1,365
- 2
- 13
- 27
37
votes
3 answers
React Server side rendering of CSS modules
The current practice for CSS with React components seems to be using webpack's style-loader to load it into the page in.
import React, { Component } from 'react';
import style from './style.css';
class MyComponent extends Component {
render(){
…
willwill
- 1,056
- 3
- 12
- 21
29
votes
1 answer
Why am I not being able to compile SASS with Webpack?
I have the following modules in my Webpack config:
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
…
PedroD
- 5,670
- 12
- 46
- 84
25
votes
7 answers
Webpack style-loader / css-loader: url() path resolution not working
There are a few SO posts about style-loader and css-loader, but despite this I have not been able to find a solution to my problem.
In short summary, when I @import css files in other css files, and the imported css contains url()s with relative…
Magnus
- 6,791
- 8
- 53
- 84
24
votes
3 answers
Are we forced to use 'unsafe-inline' in our CSP when using Vue.JS?
Is there a way to make Vue.js to work with CSP properly?
When I run my spa application (resulting from npm run generate with Nuxt.js), I will get several warnings such as these:
Refused to apply inline style because it violates the following
…
PedroD
- 5,670
- 12
- 46
- 84
23
votes
2 answers
How to include materialize-css npm package with webpack
I'm writing a client-side app that is using Webpack, and I cannot figure out how to require the materialize-css package. I'm using Henrik Joreteg's hjs-webpack package, and with this the yeticss npm package is included by doing an import in a sass…
neurodynamic
- 4,294
- 3
- 28
- 39
21
votes
5 answers
Inject CSS styles to shadow root via Webpack
I am attempting to modify the styles of web component that created with shadow root.
I see that the styles are added to a head tag but it has no effect on the shadow root as it's encapsulated.
What i need is to load the styles of all components and…
albertR
- 321
- 1
- 3
- 6