05. 웹팩(Webpack) SCSS, POSTCSS 연동

...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      },
     ...
    ]
  },
...

require("babel-runtime/regenerator")
require("react-hot-loader/patch")
require("babel-register")
require("webpack-hot-middleware/client?reload=true")
require("./main.scss");  // scss파일을 추가
require("./index.html");
require("./app.js")

...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "postcss-loader"}, // 추가
          { loader: "sass-loader" }
        ]
      },
      // scss 없이 postcss 개별 연동도 가능!
      //{
        //test: /\.css$/,
        //exclude: /node_modules/,
        //use: [
          //{ loader: "style-loader" },
          //{ loader: "css-loader" },
          //{ loader: "postcss-loader" }
        //]
      //},
     ...
    ]
  },
...

module.exports = {
    plugins: [
        require('autoprefixer') // 자동으로 브라우저에 맞는 Css 프리픽스를 추가해준다.
        // require('postcss-nested') scss 방식의 nested css 지원
    ]
}