Làm thế nào để biên dịch trước scss thành một tệp css duy nhất trong webpack?

Question

Sử dụng React với webpack. Chạy qua một số bài viết, nhưng hầu hết trong số họ đề xuất gọi từng tệp scss cho từng thành phần. Nhưng tôi muốn biên dịch trước tất cả các css vào tập tin duy nhất cho toàn bộ ứng dụng như chúng ta sử dụng grunt/gulp.

Answer 1

Bạn có thể sử dụng webpack-text-extract-pluggin chịu trách nhiệm biên soạn tất cả các tệp css và nhóm chúng trong một tệp index.css.

Cũng lưu ý rằng bạn cũng cần cài đặt sass-loader để biên dịch scss.

Trong cấu hình webpack:

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') 
      } 
     ] 
    } 
} 

Trong index.html:

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

Trong bất kỳ tập tin javascript mà được thông qua webpack:

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

Answer 2

Bạn có thể có một cái nhìn tại extract-text-webpack-plugin.

Sau khi yêu cầu này trong webpack.config.js của bạn:

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

Bạn có thể viết lại bộ nạp sass của bạn như thế này:

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

Đối với nhiều lựa chọn hơn và sử dụng kiểm tra liên kết ở trên.