Issue
I am new to NextJS
, I need to change the CSS class prefix
+ suffix
to this format:
<li class="desktop__menu-item--2feEH"></li>
<li class="desktop__menu-item--2feEH"></li>
<li class="desktop__menu-item--2feEH"></li>
<li class="desktop__menu-item--2feEH"></li>
How to change the component.module.css
CSS classes to the format of [path][name]__[local]--[hash:base64:5]
, can someone explain it to me please?
Do I need a config.js
file? I am using Next.js v10.0.9
Solution
Next.js doesn't yet provide a built-in way to modify the css-loader
options.
However, you can still do so by customising the webpack configuration in your next.config.js
. You'll need to manually go through each css-loader
module loader and add the desired localIdentName
.
// next.config.js
module.exports = {
webpack: (config) => {
const rules = config.module.rules
.find((rule) => typeof rule.oneOf === 'object')
.oneOf.filter((rule) => Array.isArray(rule.use));
rules.forEach((rule) => {
rule.use.forEach((moduleLoader) => {
if (
moduleLoader.loader !== undefined &&
moduleLoader.loader.includes('css-loader') &&
typeof moduleLoader.options.modules === 'object'
) {
delete moduleLoader.options.modules.getLocalIdent;
moduleLoader.options = {
...moduleLoader.options,
modules: {
...moduleLoader.options.modules,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
// You can also add other css-loader options here
}
};
}
});
});
return config;
}
};
Answered By - juliomalves
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.