Webpack scss loader, css loader 및 post css

Question

ES6 클래스를 사용하는 앱에 webpack을 설정하려고합니다. Sass를 사용하지만 가져 오는 공급 업체 CSS 파일도 있습니다. sass 부분은 sytle.scss@import으로 가져옵니다. postcss 로더를 추가하기 전까지는 아무 문제없이 작동했지만 컴파일하려고하면 오류 메시지가 나타납니다.

에서 webpack.config.js :

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 : 에서

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

가 app.js :

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

이것은 오류입니다 :

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-loader를 먼저 사용하려고합니다.

시도는 로더

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