如何在Next.js+Tailwind项目中引入node_modules中的SCSS与字体文件？

1. 修复Sass路径配置错误 #

你当前next.config.js里的sassOptions路径配置有误，导致无法定位到scss/_oc_main.scss。正确路径应指向corporate-web-assets/assets/live目录（scss文件夹直接存在于此目录下），而非不存在的styles子目录。

修改后的next.config.js：

/** @type {import('next').NextConfig} */
const path = require('path');

const nextConfig = {
    output: 'export',
    distDir: 'dist',
    sassOptions: {
        includePaths: [path.join(__dirname, 'node_modules/corporate-web-assets/assets/live')]
    },
    images: {
        unoptimized: true
    },
    webpack: (config) => {
        // 配置webpack处理各类字体文件
        config.module.rules.push({
            test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
            type: 'asset/resource',
            generator: {
                filename: 'fonts/[name].[hash][ext]'
            }
        });
        return config;
    }
}

module.exports = nextConfig

2. 确保SCSS中字体路径解析正常 #

corporate-web-assets的SCSS文件中字体引用路径是相对assets/live目录的（比如../fonts/Interstate/Interstate-Bold.woff2），我们已将assets/live加入Sass搜索路径，这些相对路径会被正确解析，webpack会自动将字体文件复制到输出目录。

3. 验证全局样式导入 #

你的globals.css导入语句无需修改，保持如下即可：

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'scss/_oc_main';

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}
/* 其他自定义样式 */

4. 处理嵌套node_modules的潜在依赖冲突 #

由于corporate-web-assets内部自带node_modules，可能引发依赖重复问题。若后续出现冲突，可在webpack配置中添加resolve.modules，优先使用项目根目录的依赖：

webpack: (config) => {
    // 字体处理规则...
    
    config.resolve.modules = [path.resolve(__dirname, 'node_modules'), ...config.resolve.modules];
    return config;
}

验证操作 #

1. 重启Next.js开发服务器（npm run dev），确认无模块未找到错误。
2. 通过浏览器开发者工具的「元素」「网络」标签，检查品牌字体、样式是否成功加载渲染。

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