[webpack] scss 설정 하다 만난 몇가지의 에러

1. node-sass 5버전 깔려있으면 4버전으로 내리기

• 현재 5버전에 버그 있으며, node-sass는 노드 버전에 의존적임

jeonghwan-kim.github.io/dev/2020/06/27/node-sass.html

2. MiniCssExtractPlugin 설정 에러

ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.

options has an unknown property 'hmr'. These properties are valid: object { publicPath?, esModule?, modules? }

hmr옵션이 사라진거였다.

// hmr: true, 삭제 하면 됨
{
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
              hmr: true,
            },
          },
          "css-loader?sourceMap",
          "sass-loader?sourceMap",
        ],
      },
    ],
  }
};

3. import 순서에 따른 에러
   Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
   ModuleNotFoundError: Module not found: Error: Can't resolve 파일명

common.scss에 변수와 함수들이 있었고 그걸 쓰는게 screen.scss였는데 screen.scss가 먼저 import 되어있어서 발생한 에러.

@charset "utf-8";
// common.scss가 위에 위치
@import "./common.scss";
@import "./screen.scss";