Rollup scss插件未将CSS嵌入/导入最终index.js问题排查

项目目录结构 #

src
└── component
    ├── Player.tsx
    ├── PlayerUI.style.scss
    └── index.ts

Player.tsx中的SCSS导入 #

import './PlayerUI.style.scss';

Rollup配置文件 #

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      // {
      //   file: packageJson.main,
      //   format: "cjs",
      //   sourcemap: true,
      // },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      del({ targets: 'dist/*' }),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      json(),
      scss(),
      livereload(),
    ],
    external: ['react-dom', 'axios', 'react-redux', 'react', '@reduxjs/toolkit', 'react-audio-player'],
  },
  {
    input: 'src/components/player-ui/PlayerUI.style.scss',
    output: [
      { file: "dist/esm/components/player-ui/PlayerUI.style.scss" }
    ],
    plugins: [
      scss()
    ],
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts(),]
  },
];

构建后目录结构 #

dist
└── esm
    ├── components
    │   ├── Player.d.ts
    │   └── PlayerUI.style.scss
    ├── index.css
    ├── index.js
    └── index.d.ts

类库功能正常，但浏览器中没有CSS样式。检查index.js发现其中既无CSS导入语句，也没有字符串化的CSS内容，生成的index.css处于孤立状态，无人调用/导入。

问题核心在于rollup-plugin-scss的默认行为和冗余的SCSS单独打包配置，以下是修复步骤：

1. 删除单独打包SCSS的冗余任务
   你当前配置中单独处理PlayerUI.style.scss的Rollup任务，会导致SCSS文件脱离主构建流程，直接删除这段配置：

   // 移除该段配置
   // {
   //   input: 'src/components/player-ui/PlayerUI.style.scss',
   //   output: [
   //     { file: "dist/esm/components/player-ui/PlayerUI.style.scss" }
   //   ],
   //   plugins: [
   //     scss()
   //   ],
   // },
   

2. 调整SCSS插件配置，确保CSS被关联到JS
   有两种可选方案：

   • 方案一：内联CSS到JS（运行时自动注入）
     修改rollup-plugin-scss的配置，让CSS内容直接嵌入JS文件，运行时动态插入页面：

     scss({
       output: false, // 禁用单独输出CSS，改为内联到JS
     }),
     

     构建后的index.js会包含CSS内容，运行时自动在页面生成style标签，样式即可生效。

   • 方案二：保留单独CSS文件并自动添加引用
     若希望保留独立的index.css，需要用rollup-plugin-postcss替代rollup-plugin-scss（后者默认不会在JS中添加CSS导入语句）：

     • 安装依赖：npm install rollup-plugin-postcss --save-dev
     • 替换插件配置：

       postcss({
         extract: true, // 提取单独的CSS文件
         modules: false, // 非CSS Modules场景设为false
       }),
       

     构建后index.js会自动添加import './index.css';语句，确保CSS被正确引用。

3. 添加SCSS文件的TS类型声明
   在项目根目录创建declarations.d.ts文件，避免TS编译报错：

   declare module '*.scss' {
     const content: { [className: string]: string };
     export default content;
   }
   

   或者在tsconfig.json中配置相关类型支持：

   {
     "compilerOptions": {
       "types": ["node"]
     },
     "include": ["src/**/*", "src/**/*.scss"]
   }
   

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