Overriding react-bootstrap CSS mit benutzerdefinierten SASS

Ich arbeite an einer benutzerdefinierten Anwendung mit react und Bootstrap mit Webpack und SASS erstellen. Ich bin in der Lage gewesen, alles richtig anzuhängen (zum größten Teil), außer dass ich versuche, einige der Standard-Bootstrap-Stile innerhalb meiner reagierenden Komponenten zu überschreiben, aber es scheint nicht zu funktionieren.Overriding react-bootstrap CSS mit benutzerdefinierten SASS

Hier ist meine Dateistruktur

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; 
}

Im main.scss habe ich versucht, die Farbe des Bootstrap navbar-Marke Stil als Beispiel aus der SASS-Datei zu überschreiben Es scheint jedoch, dass die Datei bootstrap.min.css mir nicht erlaubt, den Stil zu überschreiben. Ich weiß, dass die main.scss-Datei im Renderer-Build enthalten ist, weil ich so etwas zu main.scss hinzufügen kann und der Stil auf der Webseite aufgenommen wird.

body { 
    background-color: #FF0000; 
}

Gebündelte Datei ist here

Was bin ich, dass würde die Stile verursachen nicht von der main.scss Datei überschrieben werden?

Quelle

2017-09-19 mightymouse3062

was macht Ihr bundled.js aussehen? Wo wird Ihre main.scss kompiliert und in Ihr HTML eingebunden? ist es in bundled.js enthalten? – miir

Ich glaube, ich sehe es in Zeile 9546 der [gebündelten Datei] (https://gist.github.com/didomenicom/b41fb7225cbc81c35d7607981268a426#file-gistfile1-txt-L9546). Das einzige Include ist in renderer.js. Ich habe auch die Webpack-Konfiguration hinzugefügt. – mightymouse3062

Das Problem ist in Ihren Webpack-Konfigurationsoptionen für css-loader. Sie verwenden die Option , die lokale Klassennamen generieren soll, um das Überschreiben vorhandener Klassen zu vermeiden. aber Ihr Ziel ist die bestehenden Bootklassen und Lokalisierung Ihrer Klassennamen zu überschreiben hindert Sie: ~~localIdentName: '[name]__[local]__[hash:base64:5]'~~

webpack.config.js (Teilansicht):

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

Zusätzlich Es scheint, dass Bootstrap eine CSS-Regel mit höherer Spezifität .navbar-inverse .navbar-brand als die, die Sie haben, anwenden, so dass Ihre CSS nicht angewendet werden würde. Wenn Sie den gleichen Wähler in Ihrem main.scss verwenden, dann wird Ihr Stil Vorrang und Bootstrap-Stil überschreiben:

main.scss

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

Quelle

2017-09-19 20:17:42 miir

Interessanterweise hat das nicht funktioniert :( Wenn ich mit Ihrem Beispiel des Erstellens einer entry.scss-Datei gehe und den Inhalt einschließe, wie Sie in der alternativen Methode haben, funktioniert es immer noch nicht. Wenn ich nur den ersten auskommentiere Zeile importieren und eine .navbar-Marke in der Datei haben, erscheint sie immer noch nicht. Irgendwelche Gedanken darüber, wo ich suchen sollte? – mightymouse3062

@ mightymouse3062 Hat es während des Kompilierens unterbrochen oder haben die CSS-Regeln nicht wie erwartet funktioniert? – miir

@ mightymouse3062 Ich änderte meine Antwort zu einer funktionierenden Lösung. Ich musste Ihren Code lokal ausführen, um ihn zu optimieren, um das Problem zu finden. – miir

Overriding react-bootstrap CSS mit benutzerdefinierten SASS

Antwort

Verwandte Themen