CSS 类名在 production/development 中的解释顺序不同

Question

我正在使用 create-react-app v2。

我有一个包含多个 class 名称的组件："x15 x14 login-form__field"。在 HTML 中，它们在两种环境中的顺序相同。

在生产版本中，“.x14”的优先级高于 'login-form__field'。它们在发展中是相反的（并且是正确的）。有任何想法吗？我知道 webpack 会进行一些提升和 post 处理，但不确定为什么会影响它。

干杯

--更新--

我刚刚注意到自定义 class 正在作为内联样式加载，这就是它获得优先权的原因。我假设 webpack 正在这样做。无论如何我们可以告诉 webpack/CRA 加载样式作为样式表 - 而不是内联。否则说明款式不代表生产。

--第二次更新--

Create-react-app 使用 'styleLoader' 用于开发中的内联样式以进行热重载，并生成 CSS 仅用于生产。这是有道理的。

Answer 1

如果您在项目中使用 css 模块，并且偶然在 classes 中使用 composes，则可能会发生这种情况。如果您在一个 class 中使用组合来继承不同文件中另一个 class 的属性，那么排序不适用于此目的。

Answer 2

Create-react-app 使用 'styleLoader' 用于开发中的内联样式以进行热重载，并生成 CSS 仅用于生产。