如何配置Next.js支持无需.module后缀的组件SCSS导入？

AI 小北

2026-10-9

Next.js 兼容普通SCSS导入方式配置方案

首先请确保你已经安装了sass依赖：

npm install sass --save-dev
# 或者用yarn
yarn add sass --dev
# 或者用pnpm
pnpm add sass -D

方案1：保留全局导入写法（适用于原有`import './componentName.scss'`直接注入全局样式的场景）

Next.js默认限制非.module.scss后缀的样式文件只能在根入口_app.js/_app.tsx中导入，你可以通过修改next.config.js配置删除这个限制，直接在任意组件中使用原有写法：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // 遍历所有规则，移除scss文件的导入位置限制
    config.module.rules.forEach(rule => {
      if (rule.test?.toString().includes('scss')) {
        delete rule.issuer;
      }
    });
    return config;
  },
  // 可选配置：设置scss全局变量、混入的搜索路径
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  }
}

module.exports = nextConfig;

配置完成后重启开发服务即可生效，原有导入写法不需要做任何修改。

方案2：所有SCSS默认作为CSS Modules处理（适用于原有项目已经用了`import style from './componentName.scss'`调用局部类名的场景）

如果你不想给所有SCSS文件加.module后缀，可以配置让所有.scss文件默认走CSS Modules解析逻辑：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    const scssModuleRule = config.module.rules
      .find(rule => rule.oneOf)
      .oneOf
      .find(rule => rule.test?.toString().includes('.module.scss'));
    // 修改匹配规则，让所有.scss文件都走CSS Modules逻辑
    scssModuleRule.test = /\.scss$/;
    return config;
  }
}

module.exports = nextConfig;