Question

我正在使用react和bootstrap与webpack和SASS创建一个自定义应用程序。我已经能够正确地连接所有内容（大部分），除了我试图覆盖我的反应组件中的一些默认引导程序样式但它似乎没有工作。

这是我的文件结构

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')
)

导航/ 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中，我试图从SASS文件中覆盖bootstrap navbar-brand样式的颜色作为示例，但是bootstrap.min.css文件似乎不允许我覆盖样式。我知道main.scss文件包含在渲染器构建中，因为我可以将这样的内容添加到main.scss中，并在网页中拾取样式。

body {
    background-color: #FF0000;
}

捆绑文件为here

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

Answer 1

问题出在css-loader的webpack配置选项中。您正在使用localIdentName选项，该选项用于生成本地类名，以避免覆盖现有类;但是，你的目标是来覆盖现有的bootstrap类，并且你的类名的本地化会阻碍你： <击> 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规则，因此不会应用您的CSS。如果你在main.scss中使用相同的选择器，那么你的风格将优先并覆盖bootstrap的风格：

<强> main.scss

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

使用自定义SASS覆盖react-bootstrap CSS

1 个答案: