2

我们有一个使用 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'，其中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添加支持做出贡献？

4

2 回答 2

1

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

此功能存在一个未解决的问题。

为项目做出贡献并添加对 ICSS 的支持是一个好主意，但期待一些关于配置外观的讨论。

于 2021-07-30T09:40:49.753 回答
0

我刚刚意识到，如果我使用rollup-plugin-stylesmodules: true的选项，我会得到我正在寻找的行为......更多细节在README中。

于 2021-07-30T11:30:42.260 回答