用自定义 SASS 覆盖 react-bootstrap CSS

Question

我正在使用 React 和 bootstrap 以及 webpack 和 SASS 创建自定义应用程序。我已经能够正确地连接所有东西（大部分），除了我试图覆盖我的反应组件内部的一些默认 bootstrap 样式，但它似乎不起作用。

这是我的文件结构

webpack.config.js
app/
--index.html
--main.scss
--renderer.js
--components/
----navigation/
------index.js

webpack.config.js

const path = require('path')
const webpack = require('webpack')

const myConfig = {
    entry: [
        path.resolve('./app/renderer.js'),
        'webpack-hot-middleware/client?reload=true&path=http://localhost:5555/__webpack_hmr',
        'webpack/hot/only-dev-server',
    ],

    devtool: 'inline-source-map',
    target: 'web',

    module: {
        loaders: [
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: 'style-loader!css-loader!sass-loader?sourceMap',
            },
        ],
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        plugins: [
                            'transform-class-properties',
                            'transform-decorators-legacy',
                            'transform-es2015-classes',
                            'react-hot-loader/babel'
                        ],
                    },
                },
            },
            {
                test: /.scss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            localIdentName: '[name]__[local]__[hash:base64:5]',
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
        ],
    },

    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],

    output: {
        path: path.join(__dirname, './app/static'),
        filename: 'bundled.js',
        publicPath: 'http://localhost:5555/static/',
    },
}

module.exports = [ myConfig ]

index.html

<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    </head>
    <body>
        <div id='root'></div>
        <script src="http://localhost:5555/static/bundled.js"></script>
    </body>
</html>

renderer.js

import React from 'react'
import ReactDOM from 'react-dom'

import './main.scss'

import Navigation from './components/navigation'

ReactDOM.render(
    <Navigation />, 
    document.getElementById('root')
)

navigation/index.js

import React from 'react'
import { Navbar } from 'react-bootstrap'

export default class Navigation extends React.Component {
    clickHandler = () => {
        console.log("Hello World")
    }

    render() {
        return (
            <Navbar id="navigationRoot" inverse staticTop>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a onClick={this.clickHandler}>SiteName</a>
                    </Navbar.Brand>
                </Navbar.Header>
            </Navbar>
        )
    }
}

main.scss

.navbar-brand {
    color: #FF0000;
}

在 main.scss 中，我试图覆盖 bootstrap navbar-brand 样式的颜色作为 SASS 文件中的示例，但是 bootstrap.min.css 文件不允许我覆盖样式。我知道 main.scss 文件包含在渲染器构建中，因为我可以将类似的内容添加到 main.scss 并且网页中会选择样式。

body {
    background-color: #FF0000;
}

捆绑文件是here

我错过了什么会导致样式不被 main.scss 文件覆盖？

Answer 1

问题出在 css-loader 的 webpack 配置选项中。您正在使用 localIdentName 的选项，这意味着生成本地 class 名称以避免覆盖现有的 classes；但是，您的目标是覆盖现有的 bootstrap classes 并且 classnames 的本地化阻碍了您： ~~localIdentName: '[name]__[local]__[hash:base64:5]'~~

webpack.config.js（局部视图）:

        {
            test: /.scss$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        sourceMap: true,
                        importLoaders: 1
                    }
                },
                {
                    loader: 'sass-loader'
                }
            ]
        },

此外，bootstrap 似乎将应用 css 规则，其特异性 .navbar-inverse .navbar-brand 高于您所拥有的规则，因此您的 css 不会被应用.如果您在 main.scss 中使用相同的选择器，那么您的样式将优先并覆盖 bootstrap 的样式：

main.scss

.navbar-inverse .navbar-brand {
    color: #FF0000;
}

用自定义 SASS 覆盖 react-bootstrap CSS

Overriding react-bootstrap CSS with custom SASS

sass

webpack

react-bootstrap