Rollup 和 Post CSS - 自动为 React className 属性添加前缀

Question

我正在使用 Rollup + React + Post CSS 构建组件库。我正在寻找一种自动前缀 class 名称的方法，以便它们不会与使用该库的项目中的样式冲突。

我已经添加了这个插件来自动将 'prefix-' 添加到 CSS 中的每个 class 名称：

Post CSS Prefixer

但是，这不会修改 JavaScript (JSX)，因此 React 组件仍在使用未命名的 classes 作为 className 属性。

有没有办法使用 Rollup 自动修改 className 属性以包含 CSS 中指定的相同前缀？

请注意，我不是在寻找完全模块化的解决方案，例如 CSS 模块，因为我希望库中的每个组件都具有相同的 'prefix-'。

Answer 1

您不能使用静态类名来使用此功能。要使用它，您需要将样式导入为对象并将其指定为对象。

import React from "react";
import style from "style.css";

class DivMyStyle extends React.Component {
  render() {
    return <div className={style.myStyle} />
  }
}

Rollup 和 Post CSS - 自动为 React className 属性添加前缀

Rollup and Post CSS - Auto-prefixing React className attributes

rollup

jsx

reactjs

postcss