css - create-react-app npm run build 错误的 css 顺序

Question

我得到了我的 index.js

import './styles/index.css';
import './styles/responsive.css';

index.css 包含浏览器桌面样式，而 responsive.css 将在屏幕变小时覆盖，就像在移动设备中一样。在开发中这工作得很好，但是在运行 npm run build 之后使用编译的 css 会使响应式样式变得困惑。尝试调试后，我发现在 build/static/css/main*.chunk.css 中，responsive.css 中的条目比 index.css 中的条目先出现，这就造成了问题。

有什么办法可以解决这个问题吗？我可以将 responsive.css 合并到 index.css 中，但我觉得这只是一种解决方法

Answer 1

我相信您的问题没有答案。如果你用谷歌搜索“错误的 css 顺序”，你可能会发现 webpack 超过 2 年的 github 问题。像那个https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/548还有很多其他的。

我通过将样式组合到一个文件中解决了这个问题。我使用 scss 所以做了类似的事情:

// main.scss

@import 'globals';
@import 'responsive';

在 js

中

import main.scss