如何在使用 webpack 时覆盖 css 框架中的样式? [英] How can I overwrite styles from a css framework while using webpack?

问题描述

我正在为我的应用使用 CSS 框架，但想要覆盖某些样式.通常我会做这样的事情:

I'm using a CSS framework for my app but want to overwrite certain styles. Normally I would do something like:

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

所以我的样式表会覆盖任何框架前编写的样式表.但是 react 没有 src/app.css 的链接，所以我不知道该怎么做，也没有在他们的文档中找到这个.

so my stylesheet overwrites any pre-framework-written stylesheet. But react doesn't have a link to src/app.css so I'm not sure what to do and couldn't find this in their docs.

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

*Note: I would like to not use !important because I have found this to be troubling while dealing with site maintenance.

推荐答案

为了覆盖你的框架样式，你可以配置你的 webpack，如果你将它与 css-loader 一起使用

In order to override your framework styles you can configure your webpack if you are using it with css-loader like

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

    }

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

and import your styles in your App component like

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

这篇关于如何在使用 webpack 时覆盖 css 框架中的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！