Webpack不尊重导入顺序

Question

Webpack不尊重导入顺序

5

我们目前正在使用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 上，例如我们已经完全重新设计了表单输入框，但它们仍旧以 bootstraps 默认样式出现。

- Mederic

你确定在你的项目中没有其他文件导入了Bootstrap吗？ - CuriousSuperhero

@CuriousSuperhero 是的，我确定。 - Mederic

https://codesandbox.io/s/343r7r9o6m 这个很好用。你能在那个网站上重现它吗？ - Roy Wang

1

这取决于样式表在<head>...</head>标签中链接的顺序。如果您可以提供一个示例存储库，我可以帮助您解决问题。 - Suhas V

你可能需要旋转 HTML 页面上的<link />标签顺序。你确定你自己指定的样式在元素规定方面更具有优势吗？你应该考虑给你想要自定义的元素赋予类名，并在 CSS 中给出更精确的目标。例如，hr.my-own-class，这样你的样式就能胜过 Bootstrap 的默认样式。如果你仅声明了许多 hr 目标，则最新的一个会获胜。另外，这个问题完全与 React 无关。 - Jimi Pajala

显示剩余2条评论

2个回答

-2

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

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

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

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

希望这能解决你的问题。请尝试一下。

- USS

请尝试使用 !important。之前是我自己打错了。 - USS

1

我知道!important的作用，但这里我们不是在谈论10行代码的问题。自定义CSS超过几千行。此外，这也不是!important应该使用的方式。 - Mederic

1

这与我正在寻找的相反，他正在询问如何确保Bootstrap覆盖其余部分。 - Mederic

@Mederic，我刚刚更新了我的答案，它可以按照你的需求工作。请检查一下。如果这对你有用，我会很高兴。 - USS

@Mederic，你有检查过吗？ - USS

如前所述，我不能只是通过黑客手段重命名超过10,000行CSS。WildService的解决方案更加简洁。 - Mederic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jed Richards · Accepted Answer

你能否尝试从你的creative.css文件中导入Bootstrap? 我认为这样做可以让Webpack正确排序，而在JS中使用import导入CSS时，它并没有定义严格的顺序。

例如：

index.js

import './css/creative.css'

creative.css

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