반응을위한 웹팩 구성 CSS

Question

나는 Webpack에 매우 익숙하기 때문에 제 질문은 분명하고 100 배 빠른 질문 일 가능성이 높습니다. 단지 연결 만 할 수 있습니다. 혹시.

저는 Express - Ract - Gprahql - Semantic-ui 프로젝트가 있습니다. 나는 그것을 Webpack과 함께 묶어야하고 나는 그 논리를 완전히 얻을 수 없다. 구성 요소의 스타일을 추가해야합니다. CSS 모듈을 사용해야합니다. (Do I?) webpack.config의 일부 마술 내용 do 모듈 부분을 추가하십시오.

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './client/index.js', 
    output: { 
    path: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.jsx$/, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 'style-loader', 'css-loader' ] 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'client/index.html' 
    }) 
    ] 
}; 

가 나는 CSS와 (뜻대로) 스타일의 로더를 필요 문서에서 발견 그래서 적절한 패키지를 설치하고 module.rules에 개체를 추가 한 : 지금까지 (사용자 정의 CSS없이 작업)이 그 모양 :

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

컴파일하는 동안 모두 오류가 발생합니다.

You may need an appropriate loader to handle this file type. 
| const Root =() => { 
|  return (
|   <ApolloProvider client={client}> 
|    <Router history={hashHistory}> 
|    <Route path="/" component={App}> 

내가 물어하지만 어디서부터 시작 몰라요 전에 나는 그것을 더 이상 조사 할 수 있으면 좋겠다. 필요한 경우 내 레포는 다음과 같습니다. https://bitbucket.org/don_Kamillo/ranking/src

Answer 1

현재 .js 개 파일의 로더가없는 것 같습니다. 이는 babel-loader이 .jsx$으로 구성되어 있기 때문입니다. 당신이 선택 될하기 위해 x을 원하는 경우 .jsx?$를 사용

module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.jsx?$/, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 'style-loader', 'css-loader' ] 
     } 
    ] 
    },