使用Rollup打包React组件库时SCSS别名路径导入失败求助

问题描述 #

使用TypeScript、SCSS和Rollup构建React组件库，配置路径别名@scss指向src/scss，在button.module.scss中通过@use "@scss/mixins/media"导入样式文件，但执行rollup -c --bundleConfigAsCjs命令构建时出现RollupError：找不到要导入的样式表。

项目结构 #

elementus/
┣ src/
┃ ┣ scss/
┃ ┃ ┣ mixins/
┃ ┃ ┃ ┣ _colors.scss
┃ ┃ ┃ ┣ _flex.scss
┃ ┃ ┃ ┣ _font.scss
┃ ┃ ┃ ┣ _media.scss
┃ ┃ ┃ ┗ _typography.scss
┃ ┃ ┗ _variables.scss
┃ ┣ ui/
┃ ┃ ┗ button/
┃ ┃   ┣ Button.stories.tsx
┃ ┃   ┣ Button.tsx
┃ ┃   ┣ button.module.scss
┃ ┃   ┗ index.ts
┃ ┣ utils/
┃ ┃ ┣ classNames.ts
┃ ┃ ┗ index.ts
┃ ┣ globals.d.ts
┃ ┗ index.ts
┣ .eslintrc.cjs
┣ .gitignore
┣ README.md
┣ package-lock.json
┣ package.json
┣ rollup.config.mjs
┣ tsconfig.json
┣ tsconfig.node.json
┗ vite.config.ts

当前Rollup配置 #

import alias from "@rollup/plugin-alias";
import terser from "@rollup/plugin-terser";
import postcssImport from "postcss-import";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import typescript from "rollup-plugin-typescript2";
import stringHash from "string-hash";

export default {
  input: ["./src/index.ts"],
  output: {
    dir: "lib",
    format: "esm",
    sourcemap: true,
    preserveModules: true,
    preserveModulesRoot: "src",
  },
  plugins: [
    peerDepsExternal(),
    typescript(),
    alias({
      resolve: [".scss"],
      replacements: {
        "@scss": "./src/scss",
      },
    }),
    terser(),
    postcss({
      plugins: [postcssImport()],
      extensions: [".scss"],
      minimize: true,
      modules: {
        generateScopedName: (name, filename, css) => {
          if (filename.includes("global")) {
            return name;
          }
          const hash = stringHash(css).toString(36).substring(0, 5);
          return `elementus_${name}_${hash}`;
        },
      },
    }),
  ],
};

解决方案 #

1. 修复Rollup别名配置（使用绝对路径+新语法） #

@rollup/plugin-alias的replacements选项已废弃，改用entries并使用绝对路径，避免相对路径解析基准混乱：

import path from 'path'; // 新增路径模块导入

// ...其他导入代码

alias({
  resolve: ['.scss'],
  entries: [ // 替换原replacements配置
    { find: '@scss', replacement: path.resolve(__dirname, 'src/scss') }
  ]
}),

2. 让postcss-import识别@scss别名 #

SCSS内部的@use语句由postcss-import处理，需单独配置别名解析逻辑：

postcss({
  plugins: [
    postcssImport({
      resolve(id, basedir) {
        // 处理以@scss/开头的路径
        if (id.startsWith('@scss/')) {
          return path.resolve(__dirname, 'src/scss', id.substring(6));
        }
        // 其他路径保持默认解析逻辑
        return require.resolve(id, { paths: [basedir] });
      }
    })
  ],
  // 其余配置保持不变
}),

3. 调整插件执行顺序 #

确保alias插件在postcss之前执行，让Rollup先完成路径别名解析，再由postcss处理样式文件：

plugins: [
  peerDepsExternal(),
  typescript(),
  alias(/* 配置 */),
  postcss(/* 配置 */), // 将postcss移至terser之前、alias之后
  terser(),
],

4. 同步IDE路径别名（可选） #

在tsconfig.json的compilerOptions中添加路径别名，确保开发时IDE能正确识别跳转：

{
  "compilerOptions": {
    // ...其他配置
    "paths": {
      "@scss/*": ["src/scss/*"]
    }
  }
}

内容的提问来源于stack exchange，提问作者A. B. Raihan