webpack에서 scss를 단일 CSS 파일로 사전 컴파일하는 방법은 무엇입니까?

Question

사용 방법 웹 팩으로 반응. 일부 기사를 통해 실행하지만 대부분은 각 구성 요소에 대해 개별 scss 파일을 호출하는 것이 좋습니다. 하지만 우리가 grunt/gulp를 사용하는 것처럼 전체 응용 프로그램을 위해 모든 파일을 단일 파일로 사전 컴파일하려고합니다.

Answer 1

모든 CSS 파일을 컴파일하고 index.css 파일에 번들링하는 역할을 담당하는 webpack-text-extract-pluggin을 사용할 수 있습니다.

또한 scss를 컴파일하려면 sass-loader도 설치해야합니다. 웹팩 설정에서

:

된 index.html에서

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
config = { 
    ..., 
    plugins: [ 
     ..., 
     new ExtractTextPlugin('index.css') 
    ], 
    module: { 
     loaders: [ 
      ... 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract('style','css') 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('style', 'css!sass') 
      } 
     ] 
    } 
} 

:

<link rel="stylesheet" type="text/css" href="/index.css"> 

웹팩을 통해 얻을 수있는 자바 스크립트 파일에서 :

require("./styles/my-custom-file.scss"); 

Answer 2

당신은 extract-text-webpack-plugin을 살펴 수 있습니다.

당신의 webpack.config.js이를 요구 한 후 : 더 많은 옵션에 대한

module: { 
    loaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
     {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'sass')} 
    ] 
}, 
plugins: [ 
    new ExtractTextPlugin('bundle.css') 
] 

및 사용 위의 링크를 확인하십시오

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

이에 말대꾸 로더를 다시 작성할 수 있습니다.