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;
}
은 내가 SASS 파일에서 예를 들어 부트 스트랩 네비게이션 바 브랜드 스타일의 색상을 대체 할 시도 그러나 bootstrap.min.css 파일에서 스타일을 무시할 수없는 것으로 보입니다. main.scss 파일을 렌더러 빌드에 포함시키는 이유는 main.scss에이 내용을 추가 할 수 있고 스타일이 웹 페이지에서 선택되기 때문입니다. 파일 번들
body {
background-color: #FF0000;
}
는 here
이다 내가 그 main.scss 파일에 의해 오버라이드 (override) 할 수없는 스타일을 야기 말이냐?
당신의 bundled.js 무엇 생겼를? main.scss는 컴파일되고 html에 포함되어 있습니까? bundled.js에 포함되어 있습니까? – miir
나는 [bundled file]의 9546 번 라인에서이 파일을 볼 수 있다고 생각한다 (https://gist.github.com/didomenicom/b41fb7225cbc81c35d7607981268a426#file-gistfile1-txt-L9546). 유일한 포함은 renderer.js에 있습니다. webpack 설정을 추가했습니다. – mightymouse3062