Webpack scss loader、css loader and post css

Question

私はES6クラスを使用するアプリケーションのwebpackを設定しようとしています。私はSassを使用しますが、インポートするベンダのcssファイルもあります。サスの部分音はsytle.scss、@importにインポートされます。私がpostcssローダーを追加する前まではうまくいきましたが、コンパイルしようとするとエラーメッセージが表示され、失敗します。

const extractSass = new ExtractTextPlugin({ 
    filename: "[name].[contenthash].css" 
}) 

const config = { 
    . 
    . 
    . 

    module: { 
     rules: [{ 
      test: /\.(scss|css)$/, 
      use: extractSass.extract({ 
       use: [{ 
        loader: "sass-loader", options: { 
         sourceMap: true 
        }}, 
        { 
         loader: "postcss-loader", 
         options: { 
          sourceMap: true 
         } 
        }, 
        { 
         loader: "css-loader", options: { 
         sourceMap: true, 
         importLoaders: 3, 
         modules: true 
        }} 
       ], 
       fallback: "style-loader" 
      }) 
     } 
     ] 
     }, 
    plugins: [ 
     extractSass 
     ... 
    ] 
    } 

postcss.config.js：app.jsで

module.exports = { 
    plugins: { 
     'postcss-import': true, 
     'autoprefixer': {browsers: ['> 5%', 'last 3 versions']}, 
    } 
} 

：

import '../../scss/style.scss' 
import '../../scss/vendors/select2.css; 

webpack.config.jsで

これはエラーです。

ERROR in ./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/style-loader!./node_modules/css-loader?{"sourceMap":true,"importLoaders":3,"modules":true}!../scss/style.scss 
Module build failed: Syntax Error 

(5:1) Unknown word 

    3 | // load the styles 
    4 | var content = require("!!../offline/node_modules/css-loader/index.js?{\"sourceMap\":true,\"importLoaders\":3,\"modules\":true}!./style.scss"); 
> 5 | if(typeof content === 'string') content = [[module.id, content, '']]; 
    |^
    6 | // Prepare cssTransformation 
    7 | var transform; 

Answer 1

ローダーを連鎖するときは、右から左に適用されます。あなたの場合は、最初にscssファイルでcssローダーを使用しようとしています。 ;

、私はそれを試してみましたが、現在は、出力ファイルは、オリジナルとは全く異なる

 use: [{ 
      { 
       loader: "css-loader", options: { 
       sourceMap: true, 
       importLoaders: 3, 
       modules: true 
      }}, 
      { 
       loader: "postcss-loader", 
       options: { 
        sourceMap: true 
       } 
      }, 
      loader: "sass-loader", options: { 
       sourceMap: true 
      }} 
     ],