Rollup构建中集成SCSS失败问题求助

目标需求 #

我正在搭建一个自用小型库，代码分为lib（产品代码）和app（项目代码）两部分。所有源码都在/src目录下，包含React、TypeScript和SCSS代码。我希望能在React组件中直接导入SCSS文件，比如：import './_button.scss';。另外还有一个src/style/_main.scss文件，里面包含mixins、全局样式、重置样式等内容。

配置文件 #

Rollup配置 #

import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';
import typescript from '@rollup/plugin-typescript';
import url from '@rollup/plugin-url';
import dts from 'rollup-plugin-dts';
import scss from 'rollup-plugin-scss';
import { format, parse } from 'path';
import pkg from './package.json' assert { type: 'json' };

const getTypesPath = (jsFile) => {
    const pathInfo = parse(jsFile);
    return format({
        ...pathInfo,
        base: '',
        dir: `${pathInfo.dir}/types`,
        ext: '.d.ts',
    });
};

export default [
    {
        input: 'src/index.ts',
        output: [
            {
                file: pkg.main,
                format: 'cjs',
                interop: 'compat',
                exports: 'named',
                sourcemap: true,
                inlineDynamicImports: true,
            },
            {
                file: pkg.module,
                format: 'esm',
                exports: 'named',
                sourcemap: true,
                inlineDynamicImports: true,
            },
        ],
        plugins: [
            resolve({ browser: true }),
            commonjs({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
            typescript({ tsconfig: './tsconfig.build.json' }),
            url(),
            scss({
                failOnError: true
            }),
            json(),
            terser(),
        ],
        external: ['react', 'react-dom'],
    },
    {
        input: getTypesPath(pkg.module ?? pkg.main),
        output: [{ file: pkg.types, format: 'esm' }],
        plugins: [dts()],
    },
];

tsconfig.build.json配置 #

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./types",
    "declaration": true,
    "declarationDir": "./types",
    "allowSyntheticDefaultImports": true
  }
}

遇到的问题 #

问题1：类型定义文件中的SCSS导入报错 #

生成的类型定义文件（比如button.d.ts）中保留了SCSS的导入语句：

import type { FunctionComponent } from 'react';
import type { IButtonProps } from './button.type';
import './_button.scss';
export declare const Button: FunctionComponent<IButtonProps>;

导致Rollup打包类型时出现错误：

[!] RollupError: Could not resolve "./_button.scss" from "build/esm/types/button/button.d.ts"

问题2：SCSS的@use规则位置报错 #

出现以下SCSS编译错误：

Error:
        @use rules must be written before any other rules.
  ╷
4 │ @use 'src/style/util/mixin';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 4:1  root stylesheet

但实际_button.scss文件的第一行就是这条@use语句，不符合报错描述的情况。

我的疑问 #

如何在这个库中正常使用SCSS？最好无需修改原有代码，只通过调整转译/打包配置就能让库在其他项目中正常使用，求具体解决方案。

内容的提问来源于stack exchange，提问作者F. Müller