styles is undefined in module.scss
Closed this issue · 12 comments
Bug report
Styles import from a module scss file is undefined
Actual Behavior
when i use a.module.scss and import it import styles from './a.module.scss'
styles is always undefined
Expected Behavior
in "css-loader": "^6.8.1", it works just fine but in lts version i mean "css-loader": "^7.1.2",my styles object are undefined
How Do We Reproduce?
here is my webpack config
config.module.rules.push({
// scss loader
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
},
{
loader: 'sass-loader'
}
]
}, {
// css loader
test: /\.css$/,
use: ['style-loader', 'css-loader']
})
and i am using css loader 7.1.2 , nextjs 14.2.5
Please paste the results of npx webpack-cli info here, and mention other relevant information
System:
OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz
Memory: 6.50 GB / 15.45 GB
Binaries:
Node: 20.12.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.5.0 - /usr/local/bin/npm
Browsers:
Chrome: 126.0.6478.182
Packages:
css-loader: ^7.1.2 => 7.1.2
sass-loader: ^16.0.0 => 16.0.0
style-loader: ^4.0.0 => 4.0.0
@Faraz1995 could you create a reproduction repository? Also, you need to format the code in the issue better for us to fix this
i reformat the code, tnx for mention it, also i try to make a sandbox for it too
@evenstensberg
https://stackblitz.com/edit/stackblitz-starters-ucqnqy
here is sandbox for reproduce my exact problem
GitHub repo is better
https://github.com/Faraz1995/css-loader-issue
here is github for this issue @evenstensberg
Bug report
Styles import from a module scss file is undefined
Actual Behavior
when i use a.module.scss and import it import styles from './a.module.scss' styles is always undefined
Expected Behavior
in "css-loader": "^6.8.1", it works just fine but in lts version i mean "css-loader": "^7.1.2",my styles object are undefined
How Do We Reproduce?
here is my webpack config
config.module.rules.push({ // scss loader test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[name]__[local]--[hash:base64:5]' } } }, { loader: 'sass-loader' } ] }, { // css loader test: /\.css$/, use: ['style-loader', 'css-loader'] })and i am using css loader 7.1.2 , nextjs 14.2.5
Please paste the results of
npx webpack-cli infohere, and mention other relevant informationSystem: OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz Memory: 6.50 GB / 15.45 GB Binaries: Node: 20.12.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.5.0 - /usr/local/bin/npm Browsers: Chrome: 126.0.6478.182 Packages: css-loader: ^7.1.2 => 7.1.2 sass-loader: ^16.0.0 => 16.0.0 style-loader: ^4.0.0 => 4.0.0
I also encountered the same problem，using 6.x is ok
Please use import * as styles from "./page.module.css";, please read changelog before migration - https://github.com/webpack-contrib/css-loader/releases/tag/v7.0.0
@alexander-akait as you can see in my sandbox, by your way, styles were not applied
@Faraz1995 Your sandbox works fine, all styles were applied, even more you don't have css-loader at all in your repo
v7.1.2,This version still has the bug that the imported css module object is undefined.Downgrade to v6.11.0 to restore to normal
@LazySundaier Please read the CHANGELOG, because classes are named import since v7