如何在Next.js中关闭CSS模块化功能?

16

Next.js只允许在_App.js中导入全局CSS。但我们不能在每个组件中导入全局CSS,必须根据Next.js的限制使用CSS模块。

现在我正在将一个大项目迁移到Next.js,将每个模块的CSS转换为CSS模块非常困难。是否有方法可以去除这个限制呢?

限制文档链接:https://nextjs.org/docs/messages/css-global


当您导入全局CSS时,所有组件都会使用它。因此,在您的情况下,您不必在每个单独的组件中再次包含它们。 - Lingertje
2
@Lingertje,我想将一个大型项目迁移到Next.js。在我的当前项目中,我对每个组件都有相应的SCSS,并且我正在使用BEM模型。因此,我的项目完全模块化,没有CSS模块。迁移到CSS模块需要更改每个组件,这是我想要避免的。 - user14384267
你现在可以将所有的SCSS文件都对应地包含到 main.scss 中的每个组件中。然后在 _app.js 中使用该 main.scss 作为全局CSS。 - Lingertje
3
是的,我知道。但是我想在特定组件中导入组件特定的 SCSS,而且不使用 CSS 模块。 - user14384267
6个回答

1

我希望我们回答这个问题不会太晚。您实际上可以通过编辑 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

这里是参考文献:在Next.js项目中禁用CSS模块

1
由于某些不明原因,@vially的解决方案虽然找到了_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

0

要在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 中已验证


0

我在 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;
  },
};

希望这个答案能够帮到你


0

对于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;
  },

-1

尝试在您的next.config.js中移除自定义CSS配置,例如 -@zeit/next-css -@zeit/next-sass


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接