插件 rollup-plugin-sass：错误：找不到要导入的样式表

Question

我对 @carbon/theme 和 rollup-plugin-saas 插件有疑问。

[!] (plugin rollup-plugin-sass) Error: Can't find stylesheet to import.
  ╷
6 │ @use '@carbon/themes';

看起来rollup-plugin-saas找不到node_modules目录。

@carbon/** 包是否有与 rollup/sass/typescript/react 一起使用的特定设置？

项目示例：（运行：npx rollup -c）重现错误： https://stackblitz.com/edit/vitejs-vite-jwtddm?file=rollup.config.js

我的配置总结：

这个文件 styles.scss 无法编译：

@use '@carbon/themes';
@use 'colors';
h1 {
  color: colors.$h1-color;
}

但是这个很好（colors.scss 与 styles.scss 位于同一目录中）：

// @use '@carbon/themes';
@use 'colors';
h1 {
  color: colors.$h1-color;
}

package.json：

"devDependencies": {
    "rollup": "^2.79.2",
    "rollup-plugin-sass": "^1.14.0",
    "rollup-plugin-terser": "^7.0.2"
  },
  "dependencies": {
    "@carbon/themes": "^11.43.0"
  }

rollup.config.ts

import sass from 'rollup-plugin-sass';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/index.tsx',
    output: {
        file: 'dist/bundle.js',
        format: 'iife', // Suitable for <script> tags in browsers
    },
    plugins: [
        sass({ output: 'dist/styles.css' }), // Output CSS to a file
        terser() // Minify JavaScript
    ]
};

Answer 1

有一个 includePaths 选项可用于指定 node_modules 所在的位置：

sass(
   {
    output: 'dist/styles.css',
    options: {
        includePaths: ['node_modules']
    }
})