Webpack 不尊重导入顺序

Question

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

在一个简单的 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"> 

我们的风格覆盖了引导程序，例如我们的 <hr>

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

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

但是，当我使用 react 将设计移至项目时，webpack 仅引导程序覆盖所有内容。

我试过了：

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

和：

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

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

• 索引.jsx： import './css/bootstrap.css'

• 应用程序.jsx： import './css/creative.css'

也试过另一种方式：

• 索引.jsx： import './css/creative.css'

• 应用程序.jsx： import './css/bootstrap.css'

但是我的自定义样式永远不会覆盖引导程序样式。

这不仅发生在 HR 身上，而且例如我们已经完全重新设计了表单输入，但它们只是作为引导程序默认出现。

Answer 1

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

例如

索引.js

import './css/creative.css'

创意.css

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