부트 스트랩을 추가하면 웹팩이 컴파일되지 않습니다.

Question

반응 앱의 부트 스트랩 구성 요소를 작동 시키려고합니다.
나는 가이드 https://dzone.com/articles/adding-react-bootstrap-to-a-react-app과 https://github.com/facebookincubator/create-react-app/issues/301을 따라 갔다.

import 'bootstrap/dist/css/bootstrap.css';을 내 index.js로 가져올 때. 나는 webpack에이 오류가 발생합니다.

내 webpack.config.js은 다음과 같습니다.

 module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

Answer 1

당신은 CSS 파일 작업을 style-loader 및 css-loader이 필요합니다.

... 
module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'], 
     } 
    ], 
    }, 
... 

참고 : 그 설정이 웹팩 2+입니다. 웹팩 경우 1

:

... 
module: { 
    loaders: [ 
     { test: /\.css$/, loader: 'style-loader!css-loader' } 
    ] 
    }, 
... 

간단히 style-loader 및 css-loader를 설치합니다. 당신이 제안과 규칙을 추가로

npm i css-loader style-loader -S