css - Webpack 不遵守导入顺序

Question

我们目前正在使用 Webpack 和 React 使用 Bootstrap 进行设计，并使用自定义 CSS/SASS 覆盖一些 Bootstrap 样式。

在一个简单的 HTML 页面上，我们使用:

<!-- Custom styles for this template -->
<link href="./../../css/creative.css?v=1.9" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> 

我们的样式覆盖 Bootstrap ，例如我们的 <hr>

显示的是在我们的 creative.css 中定义的那个

hr {
  max-width: 50px;
  border-width: 3px;
  border-color: #F05F40;
}

但是，当我使用 React 和 webpack 将设计移动到元素时，只有 Bootstrap 会覆盖所有内容。

我试过:

import './css/creative.css'
import './css/bootstrap.css'

和:

import './css/bootstrap.css'
import './css/creative.css'

还尝试将 app.js 包装到 index.js 中，然后像这样设置父项和子项的样式:

• index.jsx : import './css/bootstrap.css'

• app.jsx:import './css/creative.css'

也尝试了另一种方式:

• index.jsx : import './css/creative.css'

• app.jsx:import './css/bootstrap.css'

但我的自定义样式永远不会覆盖 Bootstrap 样式。

这不仅发生在 HR 身上，例如，我们已经完全重新设计了表单输入的样式，但它们只是作为 Bootstrap 默认显示。

Answer 1

您可以尝试从 creative.css 文件中导入 Bootstrap 吗？我认为这将允许 Webpack 获得正确的顺序，而当在 JS 中使用 import 导入 CSS 时，它没有定义任何严格的顺序。

例如

索引.js

import './css/creative.css'

创意.css

@import url('./bootstrap.css');
...your custom css...