Rollup - 允许 :scss 文件中的导出语句导入到 js 中

我们有一个用 Rollup 构建的 Vue 组件库。开发还处于早期阶段，但到目前为止一切进展顺利，除了这一件事：我们无法从 scss 文件中导出 SASS 变量并将它们导入到 js 文件中。我们习惯于使用:exportWebpack的声明sass-loader。像这样的东西：

断点.scss

@import './unit.scss';

$breakpoint-mobile: 360px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1200px;

:export {
  mobile: strip-unit($breakpoint-mobile);
  tablet: strip-unit($breakpoint-tablet);
  desktop: strip-unit($breakpoint-desktop);
}

然后在任何js文件中，我们可以导入样式表import breakpoints from '@/styles/settings/breakpoints.scss' where breakpoints将等于{ mobile: '360', tablet: '768', desktop: '1200' }.

所以它可以很好地与 Webpack 一起使用，但我无法使用 Rollup 使其与 Rollup 一起使用汇总插件样式 https://www.npmjs.com/package/rollup-plugin-styles无需额外的配置（我也尝试过rollup-插件-postcss https://www.npmjs.com/package/rollup-plugin-postcss，结果相同）。我在 Google 上也找不到与该问题相关的任何内容......

这是结果断点.scss由 Rollup 编译：

import n from '../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js';

var css = ":export{mobile:360;tablet:768;desktop:1200;}";
n(css,{});

export default css;
export { css };
//# sourceMappingURL=breakpoints.scss.js.map

所以看起来它想要注入有意义的样式，但仍然不是我想要的行为。是否已经有可能实现我正在寻找的目标或我需要做出的贡献rollup-plugin-styles添加支持？

Update: 看起来是支持的，请参阅answer https://stackoverflow.com/a/68590252/1280867由 pmrotule 提供。

旧答案: 您所指的功能是可互操作的 CSS (ICSS) https://github.com/css-modules/icss。 正如您所说，流行CSS加载器 https://webpack.js.org/loaders/css-loader/对于基于 webpack 的项目支持它。 据我所知汇总插件样式 https://github.com/Anidetrix/rollup-plugin-styles目前不支持可互操作的 CSS。这是我在项目中仍然使用 webpack 的原因之一。

有一个此功能的未决问题 https://github.com/Anidetrix/rollup-plugin-styles/issues/165.

为该项目做出贡献并添加对 ICSS 的支持是一个好主意，但预计会出现一些有关配置外观的讨论。