Rollup 插件可以正确处理 React 中使用的 SCSS 导出

Question

我正在寻找一种在我使用汇总构建的项目中使用 SCSS 导出的方法。

目前这在 React 中是这样工作的：

//Colors.scss
$black: #000000;

:export {
  black: $black;
}

//Component.js
import Colors from '../Colors.scss'

console.log(Colors.black)

但我似乎无法让它与汇总一起工作。他们有正确处理这个用例的插件吗？

以下是我迄今为止尝试过的插件：

rollup-plugin-styles

rollup-plugin-scss

rollup-plugin-sass

Answer 1

使用 Storybook、lerna 和 vite，我遇到了麻烦，因为旧 API 已被弃用 和

rollup-plugin-sass

（您列出的其他两个似乎维护得不太好）与此相冲突。

lerna run build

或

storybook build

都会因

Uncaught SyntaxError: The requested module './style.[css|scss|sass]' does not provide an export named 'default'

或

RollupError: Could not resolve "./style.[css|scss|sass]?inline" …

而失败，具体取决于我是否根据

Vite文档

附加?inline。

为了让它们停止冲突，我添加到全局汇总配置中：

import replace from "@rollup/plugin-replace";

…

    plugins: [
      
      replace({
        values: {
          ".scss?inline": ".scss",
          // Normally shipped with vue.js packages but it won't work in browser
          "process.env.NODE_ENV": '"production"',
        },
        delimiters: ['\\b', '\\b(?!\\.)', ""],
        preventAssignment: true,
      }),

…

不知道这对你是否有用，因为你没有说什么不起作用，但在我想出上述方法之前，我梳理了整个互联网以寻找解决方案。