Questions tagged [css-loader]

css loader module for webpack

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 …
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…
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