css loader module for webpack
Questions tagged [css-loader]
516 questions
6
votes
4 answers
Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
I'm building a react app.
I imported a slider into a file, then I got a css-loader. I'm using webpack.
Here is my slider:
import React, {useState} from 'react';
import RubberSlider from '@shwilliam/react-rubber-slider';
import styles from…
Eddy Santos
- 83
- 1
- 1
- 7
6
votes
2 answers
kebab-case to camelCase via localsConvention in css-loader 3.4.2 not working
For testing/learning purposes I am using an ejected version of create-react-app 3.4.1 which comes with css-loader 3.4.2, and I am trying to reproduce these results where the css selectors are written in kebab-case, but the js styles object converts…
Sean Donnellan
- 61
- 1
- 3
6
votes
1 answer
Webpack css-loader does not resolve aliases
I am currently doing maintenance for a project that was running React v15. Upgraded Webpack 3 > 4, Babel 6 > 7, css-loader 0.28.x > 3.0.0, etc.
Initially, updated React and used all the react-codemod + jscodeshift to transform the js files. While…
punkbit
- 7,347
- 10
- 55
- 89
6
votes
3 answers
Import global variables in less-loader
In my webpack config, I want to be able to define a global less-variables file which would be included in every less component.
With the sass-loader you can supply the following option:
loaderOptions: {
data: "@import 'globals.sass'"
}
The only…
Rinux
- 815
- 1
- 9
- 18
6
votes
2 answers
webpack style loader and css loader not working for simple example
I attempting to follow the tutorial here https://webpack.js.org/guides/asset-management/ however I can never get the css file to load. (the text is never red)
https://github.com/bryandellinger/webpackassetmanagement
> --dist
> ----bundle.js
>…
Bryan Dellinger
- 4,724
- 7
- 33
- 79
6
votes
3 answers
CSS Specificity with CSS Module
First, let me say I understand that I have a custom component "Card" that I use in one of my routes, "Home".
Card.js
import s from 'Card.css';
class Card {
...
render(){
return (
…
Essam Al-Mansouri
- 1,049
- 2
- 11
- 19
6
votes
1 answer
React: Load component's CSS only when component is rendered
# MyComponent.js
import React from 'react'
import './MyComponentStyle.css'
export default class MyComponent extends React.Component {
....
}
# App.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Switch,…
Falloutcoder
- 991
- 6
- 19
6
votes
2 answers
Adding style attributes to a css class dynamically in react app
I'm using webpack with css-loader to load my css styles and add them to React components.
import styles from '../styles/cell.css';
.cell {
border-radius: 50%;
background-color: white;
}
I'm calculating the…
noi.m
- 3,070
- 5
- 34
- 57
6
votes
2 answers
Webpack css-loader not building
I am having difficulty in getting CSS loading using css-loader on my JSX files. I was following the example from:
https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html
This is my JSX
import React from 'react';
import…
joe
- 425
- 1
- 5
- 9
6
votes
2 answers
Invalid CSS error for sass-loader
My app.scss
.tes {
color: red;
}
The output error when I execute ./node_modules/.bin/webpack
ERROR in ./~/css-loader!./~/sass-loader?indentedSyntax!./www/assets/app.scss
Module build failed:
.tes {
^
Invalid CSS after ".tes {":…
ridermansb
- 10,779
- 24
- 115
- 226
5
votes
0 answers
Can't import css as string when using MiniCssExtractPlugin
I'm using webpack. I need to load a css file as a string and I'm able to do so with css-loader, but I also need to use MiniCssExtractPlugin to inject css directly into the DOM. If I use MiniCssExtractPlugin, though, when I try to import a css I…
shin
- 333
- 3
- 11
5
votes
1 answer
Dashes in CSS class names with Gatsby v3 (css-loader v5)
In Gatsby v2 you could enable this syntax className={styles["block__element--modifier"]} by adding the following code to gatsby-node.js:
const process_rule = rule => {
if (rule.oneOf) {
return {
...rule,
oneOf:…
pks
- 91
- 1
- 8
5
votes
0 answers
CSS Loader has been initialized using an options object that does not match the API schema
Error: Module build failed: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
options has an unknown property 'localIdentName'. These properties are valid:
object {…
codelover
- 131
- 1
- 10
5
votes
1 answer
Make CSS loader output ES modules?
As far as I know, CSS loader outputs CommonJS, which doesn't work with some of Webpack's optimization features. Is there a way to make CSS loader output ES modules (import/export)?
Edit:
Here's what happens with ES modules:
main.js
import { FOO }…
Leo Jiang
- 24,497
- 49
- 154
- 284
5
votes
0 answers
react webpack build error: Range out of order in character class - component package breaks build due to styles
I can't load imported css / scss styles from 3rd party packages or cdn links. The styles load fine locally, but when I run a build webpack -p --mode production the entire app breaks and I get an indistinguishable error. It's trying to load a private…
Anthony Sarno
- 51
- 1