如何在Next.js中将SCSS文件导入为CSS字符串并注入iframe？

这里提供两种满足需求的实现方式，其中第一种无需修改Webpack配置，更符合你的要求：

方案一：使用sass包直接编译（无需修改Webpack配置） #

Next.js原生支持通过?raw后缀导入文件原始内容，结合sass包的编译能力即可完成转换：

1. 安装依赖

npm install sass
# 或 yarn add sass

2. 组件中实现逻辑

// 若为客户端组件，需添加 'use client' 指令
'use client';

import { compileString } from 'sass';
// 通过?raw获取SCSS文件的原始字符串内容
import scssRaw from './styles/test.scss?raw';
import Frame from 'react-frame-component';

export default function MyComponent() {
  // 编译SCSS为纯CSS字符串
  const { css } = compileString(scssRaw);

  return (
    <Frame head={<style>{css}</style>}>
      {/* iframe内部内容，可测试样式是否生效 */}
      <div className="bg-red">红色背景测试</div>
    </Frame>
  );
}

优化建议：服务端编译减少客户端开销 #

如果项目使用Next.js App Router，可以将SCSS编译逻辑放在服务器组件中完成，再将编译好的CSS字符串传递给客户端组件渲染，避免客户端编译的性能消耗：

// app/page.js（服务器组件）
import { compileString } from 'sass';
import scssRaw from './styles/test.scss?raw';
import ClientFrame from './ClientFrame';

export default function Page() {
  const { css } = compileString(scssRaw);
  return <ClientFrame cssString={css} />;
}

// app/ClientFrame.jsx（客户端组件）
'use client';
import Frame from 'react-frame-component';

export default function ClientFrame({ cssString }) {
  return (
    <Frame head={<style>{cssString}</style>}>
      <div className="bg-red">红色背景测试</div>
    </Frame>
  );
}

方案二：使用sass-to-string（需修改Next.js配置） #

如果你倾向于使用sass-to-string，只需少量修改Webpack配置即可实现直接导入CSS字符串：

1. 安装依赖

npm install sass-to-string sass
# 或 yarn add sass-to-string sass

2. 修改next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 为SCSS文件添加sass-to-string加载规则
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'sass-to-string',
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
          },
        },
      ],
      exclude: /node_modules/,
    });
    return config;
  },
};

module.exports = nextConfig;

3. 组件中直接导入使用

'use client';

import styleString from './styles/test.scss';
import Frame from 'react-frame-component';

export default function MyComponent() {
  return (
    <Frame head={<style>{styleString}</style>}>
      <div className="bg-red">红色背景测试</div>
    </Frame>
  );
}

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