Rollup - 允许在 js 中导入 scss 文件中的 :export 语句

我们有一个使用 Rollup 构建的 Vue 组件库。开发处于早期阶段,但到目前为止一切都运行良好,除了这一点:我们无法从 scss 文件中导出 SASS 变量并将它们导入到 js 文件中。我们习惯于使用 Webpack :exportsass-loader 语句来做到这一点。像这样的东西:

breakpoint.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' ,其中 breakpoints 将等于 { mobile: '360', tablet: '768', desktop: '1200' }

所以它适用于 Webpack,但如果没有额外的配置,我无法使用 rollup-plugin-styles 使用 Rollup(我也尝试过 rollup-plugin-postcss ,结果相同)。我在 Google 上也找不到与该问题相关的任何内容...

这是 Rollup 编译的 breakpoints.scss 的结果:

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 做出贡献以添加支持?

stack overflow Rollup - Allow :export statement in scss file to import in js
原文答案

答案:

作者头像

更新:好像支持了,请看pmrotule提供的 answer

旧答案:您所指的功能是 Interoperable CSS (ICSS) 。正如您所说,流行的基于 webpack 的项目的 css-loader 支持它。据我所知, rollup-plugin-styles 目前不支持 Interoperable CSS 。这是我仍然在我的项目中使用 webpack 的原因之一。

有一个 open issue for this feature

为该项目做出贡献并添加对 ICSS 的支持是一个好主意,但希望对配置的外观进行一些讨论。

作者头像

我刚刚意识到,如果我使用 modules: true 的选项 rollup-plugin-styles ,我会得到我正在寻找的行为...... README 中的更多详细信息。