webpack/css-loader

styles don't get applied with v7

Closed this issue · 2 comments

mjchang commented

Bug report

Imported css files like this don't seem to work for v7

import './app.css'

I followed the v7 changelog and added the following to get v6 behavior

options: {
  modules: {
    namedExport: false,
    exportLocalsConvention: 'as-is',
  },
},

I took a look at the generated CSS file and I see that my classnames in app.css now gets hashed in v7 - it wasn't in v6. Suspect this is the issue.

Actual Behavior

Styles imported this way don't get applied

Expected Behavior

Styles imported this way should get applied

How Do We Reproduce?

Using the above config to get it to v6 behavior, add the following

// app.css
.some-class-name {
 color: red;
}

// some JS file
import './app.css'

<div className="some-class-name">

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 84.89 MB / 16.00 GB
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 124.0.6367.93
    Edge: 124.0.2478.67
    Firefox: 125.0.3
    Safari: 17.4.1
  Packages:
    babel-loader: 9.1.3 => 9.1.3
    copy-webpack-plugin: 12.0.2 => 12.0.2
    css-loader: 7.1.1 => 7.1.1
    css-minimizer-webpack-plugin: 6.0.0 => 6.0.0
    fork-ts-checker-webpack-plugin: 9.0.2 => 9.0.2
    html-webpack-plugin: 5.6.0 => 5.6.0
    postcss-loader: 8.1.1 => 8.1.1
    sass-loader: 14.2.1 => 14.2.1
    style-loader: 4.0.0 => 4.0.0
    url-loader: 4.1.1 => 4.1.1
    webpack: 5.91.0 => 5.91.0
    webpack-cli: 5.1.4 => 5.1.4
    webpack-dev-server: 5.0.4 => 5.0.4
jeroen-hoekstra commented

Yes, experiencing the same issue in our code. We want to stick the v6 behaviour as well, but the styles don't get applied.

alexander-akait commented

Please set modules: false, if you don't need CSS modules just don't use this option

  • 👍1