Next.js只允许在_App.js中导入全局CSS。但我们不能在每个组件中导入全局CSS,必须根据Next.js的限制使用CSS模块。
现在我正在将一个大项目迁移到Next.js,将每个模块的CSS转换为CSS模块非常困难。是否有方法可以去除这个限制呢?
Next.js只允许在_App.js中导入全局CSS。但我们不能在每个组件中导入全局CSS,必须根据Next.js的限制使用CSS模块。
现在我正在将一个大项目迁移到Next.js,将每个模块的CSS转换为CSS模块非常困难。是否有方法可以去除这个限制呢?
我希望我们回答这个问题不会太晚。您实际上可以通过编辑 next.config.js
文件来修改 Webpack 配置,如下所示:
const path = require('path');
const nextConfig = {
webpack(config) {
// if not work, try `config.module.rules[2]...`
config.module.rules[3].oneOf.forEach((one) => {
if (!`${one.issuer?.and}`.includes('_app')) return;
one.issuer.and = [path.resolve(__dirname)];
});
return config;
},
};
module.exports = nextConfig
_app
子字符串,但仍然使服务器退出。const path = require('path')
const nextConfig = {
// other settings...
webpack (config) {
// loop over all rules and find the ones with `oneOf` key
config.module.rules.forEach(rule => {
if (!rule.oneOf) return
rule.oneOf.forEach(one => {
if (!`${one.issuer?.and}`.includes('_app')) return
one.issuer.and = [path.resolve(__dirname)]
})
})
},
}
module.exports = nextConfig
或者,如果您在找到子字符串后不想继续搜索,请将主要的 forEach
替换为 for
循环并在一个变量中跟踪成功。一旦找到子字符串,更新变量,循环将退出。
const path = require('path')
const nextConfig = {
// other settings...
webpack (config) {
let hasFound = false
for (let i = 0; i < config.module.rules.length; i++) {
const rule = config.module.rules[i]
if (!rule.oneOf) continue
rule.oneOf.forEach(one => {
if (!`${one.issuer?.and}`.includes('_app')) return
one.issuer.and = [path.resolve(__dirname)]
hasFound = true
})
if (hasFound) break
}
},
}
module.exports = nextConfig
要在Next.js中禁用css-modules组件样式,请执行以下操作:
在next.config.js中添加以下配置:
/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
// disable css-modules component styling
webpack(config) {
config.module.rules.forEach((rule) => {
const { oneOf } = rule;
if (oneOf) {
oneOf.forEach((one) => {
if (!`${one.issuer?.and}`.includes('_app')) return;
one.issuer.and = [path.resolve(__dirname)];
});
}
})
return config;
},
}
module.exports = nextConfig
在 next.js 版本 v12.3~v13.x 中已验证
我在 Medium 上搜索了一下,找到了你问题的答案。
const path = require('path');
module.exports = {
webpack(config) {
// if not work, try `config.module.rules[2]...`
config.module.rules[3].oneOf.forEach((one) => {
if (!`${one.issuer?.and}`.includes('_app')) return;
one.issuer.and = [path.resolve(__dirname)];
});
return config;
},
};
希望这个答案能够帮到你
对于Nextjs 13,我认为这个解决方案更加安全可靠:
webpack(config) {
const oneOfRule = config.module.rules.find((rule) => rule.oneOf);
if (!oneOfRule) return console.log('Unable to find css module rule to disabled it');
oneOfRule.oneOf.forEach((one) => {
if (!(one.issuer && one.issuer.and && `${one.issuer.and}`.includes('_app'))) return;
one.issuer.and = [path.resolve(__dirname)];
});
return config;
},
尝试在您的next.config.js中移除自定义CSS配置,例如 -@zeit/next-css -@zeit/next-sass
main.scss
中的每个组件中。然后在_app.js
中使用该main.scss
作为全局CSS。 - Lingertje