css loader module for webpack
Questions tagged [css-loader]
516 questions
5
votes
1 answer
Next.js pages using Link module not loading files with CSS import
I'm adding next.js (7.0.2) to an existing project and can't figure out why the Link module isn't loading pages that have import 'style.css'.
I have followed the @zeit/next-css instructions and also the Next.js/Express integration.
I installed the…

tagyoureit
- 1,276
- 1
- 10
- 17
5
votes
0 answers
How do you remove unused classes with Webpack 4 tree shaking with CSS modules?
Someone made a great example to remove unused CSS based on whether or not the JS Module is used, but I am trying to figure out how to remove the unused CSS classes from the bundle that are not actually used by components.
Example
//…

Jazzy
- 6,029
- 11
- 50
- 74
5
votes
4 answers
Create-react-app failing with error: node incompatible with css-loader
I'm simply trying to create a react app with the command npx create-react-app my-app
but get this error:
css-loader@1.0.0: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.5.0"
I've tried…

katjass
- 197
- 2
- 22
5
votes
1 answer
undefined css module class names
I have the the following component, imported css and webpack config - clearly I have imported the relevant css module, but the connection between my react output className={css__main.container} and the imported css-loader seems not to have been made…

SaminOz
- 457
- 5
- 11
5
votes
1 answer
Webpack 4 css modules TypeError: Cannot read property 'context' of undefined
I just upgraded to webpack 4. I use css modules.
ERROR:
ERROR in ./client/src/common/accordian-component/accordian.css
…

phillipjones1
- 327
- 2
- 11
5
votes
2 answers
Enabling CSS Modules from css-loader disallows importing node_modules CSS
I have a CSS Modules rule on webpack
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
}
Enabling modules modules=true gives me the following error:
ERROR in…

Berry
- 2,143
- 4
- 23
- 46
5
votes
1 answer
What does css-loader do in webpack?
According to the official webapck documentation, webpack imports specified CSS files into your JavaScript module using a loader called css-loader.
What good does this process do? How can you just not go with the old school way of linking a CSS file…

Hooey
- 85
- 1
- 8
5
votes
5 answers
Unexpected token when trying to load css with webpack and babel
I am building a react app using Express,
I tries to add a style loader/css loader to enable importing css,
but when i start my server i get the following error:
M:\MainFiles\MyStuff\Code\react\FlexBoardToolBox>npm run start:dev
> flex_board@1.0.0…

Mike
- 1,122
- 2
- 13
- 25
5
votes
1 answer
Globally add selector to all my CSS selector with Webpack (at build time)
I would like to globally append a specific selector to all CSS selector used in my application.
I'm using React and those Webpack loaders post-css, css-loader, sass-loader and extract-text-webpack-plugin.
I don't want to edit all my classname within…

Gautier Rollin
- 127
- 5
5
votes
1 answer
How to use jQuery to select a class name that's transformed by css-loader?
I'm using webpack with css-loader. Everything has been working fine except that I don't know how to use jQuery to select a css-loader transformed class. The transformed class name looks something like this "src-styleauthTextboxLeft1Npf4" with the…

Yinan Fang
- 265
- 4
- 11
5
votes
1 answer
Webpack and Sass correctly processes background: url() image but then it's not found when used with webpack-dev-server
I am using Webpack 2 and webpack-dev-server together with Sass loader, actual configuration:
{
test: /\.scss/,
loaders: [
"style",
{ loader: "css", query: { modules: false, sourceMap: true } },
{ loader: "resolve-url"…

tomastrajan
- 1,728
- 14
- 28
5
votes
0 answers
Error passing global var to LESS file with Webpack and less-loader
I am using webpack and less-loader in my project, and in my webpack config I am trying to pass a global variable to be used in my less files. That portion of the config is below:
module: {
loaders: [
{
test: /\.less$/,
…

i_trope
- 1,554
- 2
- 22
- 42
4
votes
2 answers
Tailwindcss @apply is not working in storybook
I am using Next css modules (sass). I tried every solutions I've encountered but I still cannot get it working.
My problem is, when I run the storybook, the css doesn't compile @apply method from tailwind. There is a simple solution which is remove…

hdotluna
- 5,514
- 4
- 20
- 31
4
votes
2 answers
Laravel Mix URL Processing error with css-loader
In a fresh Laravel 9 installation, the URL processing from Laravel Mix does not work anymore.
npm outputs the following:
✖ Mix
Compiled with some errors in 2.62s
ERROR in ./resources/css/app.css
Module build failed (from…

MPK1
- 336
- 1
- 12
4
votes
0 answers
Remove class objects generated by css-loader when using css-modules
Currently when the modules: true option is defined in css-loader configuration, a json object is added to js output for each css file. E.g
input
// style.css
.has-spinner {
}
output
// style.css (in js bundle)
{
hasSpinner:…

ryanVincent
- 1,033
- 1
- 9
- 14