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中，但我觉得那只是一种权宜之计。

- Va1iant

Answer 1

我相信你的问题没有答案。如果你在谷歌上搜寻“错误的CSS顺序”，你可能会找到两年前的webpack的github问题，例如这个https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/548，当然还有其他很多类似的问题。

我通过将样式合并成一个文件来解决了这个问题。我使用的是scss，所以做了以下操作：

// main.scss

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

而在js中

import main.scss

- Shevchenko Viktor