sass - 汇总 - 允许 :export statement in scss file to import in js

Question

我们有一个用 Rollup 构建的 Vue 组件库。开发处于早期阶段，但到目前为止一切都很好，除了一件事:我们无法从 scss 文件导出 SASS 变量并将它们导入 js 文件。我们习惯使用Webpack sass-loader的:export语句来实现。像这样:

断点.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 将等于 { 手机:'360'，平板电脑:'768'，桌面:'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

所以它似乎想要注入(inject)有意义的样式，但仍然不是我想要的行为。是否已经有可能实现我正在寻找的东西，或者我需要为 rollup-plugin-styles 做出贡献以添加支持？

Answer 1

更新:好像支持了，请看answer由 pmrotule 提供。

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

有一个open issue for this feature .

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