CSS 类名在生产/开发中以不同的顺序解释答案

【问题标题】：CSS classnames are being interpreted in a different order in production/developmentCSS 类名在生产/开发中以不同的顺序解释
【发布时间】：2019-04-08 08:40:33
【问题描述】：

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

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

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

干杯

-- 更新--

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

-- 第二次更新--

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

【问题讨论】：

有趣。您是否已弹出，或者它是您使用的默认 Webpack 配置？听起来是一个不错的错误报告候选者。
我没有弹出。使用 CRA 提供的默认配置。请参阅我的更新，了解为什么我认为会发生这种情况 - 但不知道如何纠正。
我有类似的问题，开发风格不代表生产将有什么。我在开发中看到一切都是样式，但对于生产来说，它是 css 文件。如何解决这个问题。我正在使用 react-script 版本 3.0.1

标签： css reactjs webpack sass create-react-app

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您在项目中使用 css 模块，并且偶然在您的课程中使用 composes，则可能会发生这种情况。如果您在一个类中使用 compose 从不同文件中的另一个类继承属性，则排序不适合此目的。

【讨论】：