Next.js 13.3.4能否通过配置在非全局CSS文件用非纯选择器？

在Next.js 13.3.4中，除了global.css，可以通过以下几种方式在其他文件中使用非纯选择器（如canvas这类标签选择器）：

1. 使用CSS Modules的:global()伪类 #

这是最推荐的方式，无需额外配置，且能保留CSS Modules的作用域隔离特性。只需将非纯选择器包裹在:global()伪类中，Next.js会自动跳过纯选择器校验：

/* 组件专属的.module.css文件 */
/* 仅对当前组件内的canvas生效 */
.component-container :global(canvas) {
  border: 1px solid #e5e7eb;
}

如果需要全局生效的非纯选择器，也可以直接写：

:global(canvas) {
  background-color: #f9fafb;
}

2. 修改webpack配置关闭纯选择器校验 #

如果需要全局禁用CSS Modules的纯选择器校验，可以在next.config.js中修改css-loader的配置：

// next.config.js
module.exports = {
  webpack: (config) => {
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          // 定位到处理CSS Modules的loader规则
          if (oneOfRule.test?.test('.module.css')) {
            oneOfRule.use.forEach(use => {
              if (use.loader === 'css-loader') {
                use.options.modules = {
                  ...use.options.modules,
                  // 完全关闭纯选择器校验
                  pure: false,
                  // 可选：仅允许指定的非纯选择器（正则匹配）
                  // pure: /^(canvas|div)$/
                };
              }
            });
          }
        });
      }
    });
    return config;
  },
};

注意：关闭纯选择器校验后，所有非纯选择器会全局生效，可能导致样式冲突，需谨慎使用。

3. 使用全局style标签（适用于App Router/Pages Router） #

在组件文件中直接使用<style global>标签编写非纯选择器，这种方式无需配置，但样式会全局生效：

// 组件文件（.tsx/.jsx）
export default function CanvasComponent() {
  return (
    <>
      <style global jsx>{`
        canvas {
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
      `}</style>
      <canvas width="400" height="300" />
    </>
  );
}

内容的提问来源于stack exchange，提问作者Fauricio Valencia