webpack에 여러 CSS 로더를 대응하십시오.

Question

반응 부트 스트랩 및 CSS 모듈을 사용하고 있습니다. 내 CSS 모듈이 설치해야하지만

{ test: /\.css$/, loader: "style-loader!css-loader" } 

:

{ 
    test: /\.css$/, 
    loaders: [ 
     'style?sourceMap', 
    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
    ] 
} 

가 어떻게 만들어 그들을 결합 않는 내 webpack.config.js에서 나는이 설정 내 bootstrap.css을 실행할 수 있어요 하나를 글로벌 CSS (부트 스트랩 등) 및 CSS 모듈에 대한 다른 위해 : 그것은 당신이 두 로더를 유지할 수있는 CSS 모듈의 작동과 반응 부트 스트랩

Answer 1

. 같은 test 속성 로더 간의 충돌을 방지하기 위해

, 사용 웹팩의 규칙 include 및 exclude 속성 :

{ 
    test: /\.css$/, 
    loader: "style-loader!css-loader", 
    include: [ 
    /* Paths to Bootstrap and further global CSS only */ 
    ] 
}, 
{ 
    test: /\.css$/, 
    loaders: [ 
    'style?sourceMap', 
    'css?modules&importLoaders=1&localIdentName[path]___[name]__[local]___[hash:base64:5]' 
    ], 
    include: [ 
    /* eg. Paths to your source directory */ 
    ] 
}