5

我们目前正在使用 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 将设计移至项目时，只有 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'

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

还尝试了另一种方式：

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

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

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

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

4

2 回答 2

4

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

例如

index.js

import './css/creative.css'

创意.css

@import url('./bootstrap.css');
...your custom css...
于 2018-05-08T15:58:37.970 回答
-2

您可以使用以下步骤用 creative.css 覆盖 bootstrap.css。

步骤 1. 设置 root id<body id="bootstrap-overrides">

步骤 2.在 中进行以下更改creative.css。您只需要使用您的 Id（“bootstrap-overrides”）为任何 CSS 选择器设置前缀，如下所示。

#bootstrap-overrides h1 
{
  margin-top: 10px;
  margin-bottom: 0.5rem;
}

希望它能解决您的问题。请尝试一下。

于 2018-05-02T11:31:50.560 回答