时间戳

首页 > 解决方案 > Webpack 不尊重导入顺序

css - Webpack 不尊重导入顺序

问题描述

我们目前正在使用 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 中并设置父级的样式，然后是子级的样式，如下所示：

还尝试了另一种方式：

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

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

标签： cssreactjswebpack

解决方案

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

例如

index.js

import './css/creative.css'

创意.css

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

推荐阅读