0
私はwebpackとSASSで反応とブートストラップを使用してカスタムアプリケーションを作成するように取り組んでいます。反応コンポーネントの中でデフォルトのブートストラップスタイルのいくつかをオーバーライドしようとしていることを除いて、すべてを正しくフックすることができましたが、動作していないようです。ここで レスキューブートストラップCSSとカスタム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;
}
しかし、bootstrap.min.cssファイルでスタイルを無効にすることはできません。 main.scssファイルをレンダラービルドに含めているのは分かります。これはmain.scssにこのようなものを追加することができ、スタイルはWebページで取得されるからです。
body {
background-color: #FF0000;
}
バンドルファイル私はそれがmain.scssファイルで上書きされないようにスタイルを引き起こす何をしないのですhere
のですか？
あなたbundled.jsは何のように見えるんか？あなたのmain.scssはコンパイルされ、あなたのhtmlに含まれていますか？ bundled.jsに含まれていますか？ – miir
私は[バンドルファイル]の9546行目（https://gist.github.com/didomenicom/b41fb7225cbc81c35d7607981268a426#file-gistfile1-txt-L9546）に表示されていると思います。インクルードはrenderer.jsのみです。私はwebpackの設定を追加しました。 – mightymouse3062