Repository navigation
import styles undefined #4277
Description
To reproduce:
import styles from './index.less';Current behavior:
const Home = () => {
console.log(styles) //undefined
return (
<div className={styles.main}>
</div>
);
}; {
test: /\.less$/,
use: [
NODE_ENV ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
modules: true,
javascriptEnabled: true,
},
},
},
],
}Expected behavior:
I hope "className= { styles.main }" can work
first, why is that?
secondly, how to fix it?
Environment information:
lessversion:4.1.3less-loaderversion:11.1.0nodejsversion:20.11.1operating system:mac
Activity
dosubot commentedon Aug 24, 2024
@HuXin957 Hello there! I'm here to help you with your GitHub issues while waiting for a human maintainer. I'm a bot named Dosu, and I can assist you with bug fixes, answer your questions, and guide you on becoming a contributor.
The issue you're encountering where
stylesisundefinedcould be due to a few reasons. Here are some steps to troubleshoot and potentially fix the problem:CSS Modules Configuration:
Ensure that CSS Modules are correctly configured in your
css-loader. You need to enable CSS Modules explicitly.Update your Webpack configuration to include the
modulesoption incss-loader:Naming Convention:
Ensure that your class names in the Less file follow the correct naming convention. For example:
File Extension:
Make sure the file extension of your Less file is correct and matches the import statement. For example, if your file is named
index.less, the import should be:Check for Errors:
Look for any errors in the console or terminal that might give more insight into why the styles are not being imported correctly.
If these steps do not resolve the issue, there might be a deeper configuration problem or a compatibility issue with the versions of the tools you are using.
To continue talking to Dosu, mention @dosu.
HuXin957 commentedon Aug 26, 2024
first,thanks. but, that can't solve my problem
Program-Monkey commentedon Oct 15, 2024
You may need to pay attention to the version of css-loader .
(尝试把 css-loader 切到 6.x 及以下试试)
Program-Monkey commentedon Oct 15, 2024
As the document write :
type namedExport = boolean;Default: Depends on the value of the esModule option. If the value of the esModule options is true, this value will also be true, otherwise it will be false.My configuration does not explicitly specify the esmodule configuration item as true, but when i add log in the node_mdoules/css-loader/utils.js getModulesOptions, it print the namedExport is true. so i get the import variable is undefined.
When I explicitly specify the namedExport field as false, it runs normally.
According to the document, isn't this field set to false by default ?
HuXin957 commentedon Oct 30, 2024