如何在使用 webpack 时覆盖 CSS 框架中的样式？答案

【问题标题】：How can I overwrite styles from a css framework while using webpack?如何在使用 webpack 时覆盖 CSS 框架中的样式？
【发布时间】：2017-11-21 04:33:57
【问题描述】：

我正在为我的应用程序使用 CSS 框架，但想覆盖某些样式。通常我会这样做：

<link rel='stylesheet' href='link to framework'>
<link rel='stylesheet' href='my own stylesheet'>

所以我的样式表会覆盖任何框架前编写的样式表。但是 react 没有指向 src/app.css 的链接，所以我不确定该怎么做，也无法在他们的文档中找到它。

*注意：我不想使用 !important，因为我发现在处理站点维护时这很麻烦。

【问题讨论】：

配置你的 webpack 加载 css 文件，然后像 import './path/to/app.css' 一样将它导入到你的组件中
效果很好@ShubhamKhatri
这就是为什么如果你使用style，React 效果最好。这是a slide show，它还描述了其他原因。

标签： css reactjs webpack

【解决方案1】：

为了覆盖你的框架样式，如果你使用 css-loader like，你可以配置你的 webpack

 {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader']

    }

并在您的 App 组件中导入您的样式，例如

import './path/to/app.css'

【讨论】：

问题中没有提到Webpack，至少有browserify。
@polkovnikov.ph 请看看我的评论。只有在 OP 验证它有效后，我才发布了一个答案。所以这表明他正在使用 webpack
该主题出现在 Google 搜索中，与 webpack 没有任何关系，我将编辑该问题。