Webpack을 별도의 CSS 파일로 분할합니다.

Question

나는 webpack과 sass를 사용하여 React 애플리케이션을 작성하고 있습니다. 지금 나는 그 사람들 CSS Modules을 시험해보고 싶지만, 나는 몇 가지 문제에 직면 해있다. 첫째, 내가 이해하는 것처럼, 나는 .scss 모듈을 사용할 수 없다. 그래서 내 생각은 .scss 파일을 .css 파일 (예 : link.scss -> link.css, main.scss -> main.css, 등)을 만들고 React 구성 요소에 연결합니다. 하지만 webpack은 .css 파일로 .scss 파일을 나눌 수 없습니다. 다른 구성을 시도했지만 항상 모든 .scss 파일을 연결하는 main.css를 얻습니다. 나는 이것이 나를위한 최선의 방법이 아니라고 생각한다.

그래서 모든 .scss 파일을 .css로 분할하는 올바른 구성을 얻을 수 있습니까? 또는 내 응용 프로그램에서 .scss 모듈을 사용하는 또 다른 방법이있을 수 있습니다. 미리 감사드립니다.

이 내 웹팩 구성

여기

var webpack = require('webpack'); 
var path = require('path'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-hot-middleware/client', 
     './src/index.jsx' 
    ], 
    output: { 
     path: path.join(__dirname, './dist'), 
     filename: 'bundle.js', 
     publicPath: '/' 
    }, 
    plugins: [ 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new ExtractTextPlugin("[name].[chunkhash].css", { allChunks: true }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['react', 'es2015', 'react-hmre'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css!autoprefixer-loader?browsers=last 15 versions!sass") 
      }, 
      { 
       test: /\.css$/, 
       loader: "style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]" 
      } 
     ] 
    } 
} 

그리고 콘솔 내 출력입니다 :

Hash: d1d3f358c1680ba4f634 
Version: webpack 1.13.1 
Time: 4297ms 
         Asset  Size Chunks    Chunk Names 
        bundle.js  2.5 MB  0 [emitted] main 
main.582da1db7866d6b8684d.css 373 bytes  0 [emitted] main 
    [0] multi main 40 bytes {0} [built] 
    + 324 hidden modules 
Child extract-text-webpack-plugin: 
     + 2 hidden modules 
Child extract-text-webpack-plugin: 
     + 2 hidden modules 

Answer 1

당신은 할 수있는 CSS 모듈과 사용 말대꾸 함께.

sass loader 정의에서 css loader에 대한 css modules 매개 변수를 지정하지 않았기 때문에이 기능이 작동하지 않습니다. ExtractTextPlugin와

: ExtractTextPlugin없이

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract('style', '!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!sass?sourceMap') 
} 

다음 ExtractTextPlugin를 사용할 때 하나의 CSS를 만들 것

가

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

주

다음은 CSS 모듈과 말대꾸를 구성하는 두 가지 방법 파일. 많은 CSS 출력 파일이 필요하면 ExtractTextPlugin을 여러 번 정의 할 수 있습니다 (참조 용으로 this 참조).