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

【问题标题】：Rollup and Post CSS - Auto-prefixing React className attributesRollup 和 Post CSS - 自动为 React className 属性添加前缀
【发布时间】：2018-05-29 16:20:41
【问题描述】：

我正在使用 Rollup + React + Post CSS 来构建组件库。我正在寻找一种自动为类名添加前缀的方法，这样它们就不会与使用该库的项目中的样式冲突。

我已经添加了这个插件来自动将“前缀-”添加到 CSS 中的每个类名：

Post CSS Prefixer

但是，这并没有修改 JavaScript (JSX)，所以 React 组件仍然使用未命名的类作为 className 属性。

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

请注意，我不是在寻找完全模块化的解决方案，例如 CSS 模块，因为我希望库中的每个组件都使用相同的“前缀”。

【问题讨论】：

标签： reactjs jsx rollup postcss

【解决方案1】：

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

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

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

【讨论】：