React转Next.js后，如何在组件任意位置导入全局.scss文件？

下面是几个能让你继续在原组件位置导入全局SCSS的可行方案：

• 修改Webpack配置（推荐）
  在项目根目录的next.config.js中添加自定义Webpack规则，针对全局SCSS文件关闭CSS Modules校验：

module.exports = {
  webpack: (config) => {
    // 遍历所有SCSS/SASS相关的loader规则
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('scss|sass')) {
        rule.oneOf.forEach(oneOfRule => {
          // 找到处理SCSS的css-loader，关闭Modules模式
          if (oneOfRule.use?.some(loader => loader.loader?.includes('css-loader'))) {
            oneOfRule.use.forEach(loader => {
              if (loader.loader.includes('css-loader')) {
                loader.options.modules = false;
              }
            });
          }
        });
      }
    });
    return config;
  },
};

如果担心样式冲突，可以给全局SCSS文件统一命名（比如global-*.scss），然后修改规则仅匹配这类文件，避免影响组件级CSS。

• 用CSS-in-JS包裹全局样式
  将全局SCSS内容通过CSS-in-JS注入组件，不会触发Next.js的全局CSS限制：

import styled from 'styled-components';
import globalStyles from './your-global.scss';

// 创建包裹全局样式的容器组件
const GlobalStyleWrapper = styled.div`
  ${globalStyles}
`;

function YourComponent() {
  return (
    <GlobalStyleWrapper>
      {/* 组件内容 */}
    </GlobalStyleWrapper>
  );
}

这种方式不会重复注入样式（只要组件仅渲染一次），但需要额外安装styled-components或emotion这类CSS-in-JS库。

• 使用第三方插件（仅限Next.js 12及以下版本）
  安装next-global-css插件直接绕过Next.js的全局CSS导入限制：

1. 安装插件：

npm install next-global-css

2. 在next.config.js中配置：

const withGlobalCss = require('next-global-css');
module.exports = withGlobalCss({});

注意：Next.js 13+的App Router不兼容此插件，使用前请确认项目版本。

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