SSIA

내가 파워 프로 2020에서 재생하는 동안 CSS-loader v4.0.0이 출시되었습니다.
그렇다고는 모르고 언제나 그대로 1에서 프로젝트를 짜는 결과, vue컴포넌트에 쓴 sytle이 닿지 않는다는 현상에 부딪혔습니다

왜… (여기서 고양이가 된다)

SSIA는 "제목으로 말하는 모든 것을 말하고 있어요"라는 의미입니다.

그럼 여기서 css-loader v4.0.0 릴리스 노트을 보자.

minimum required Node.js version is 10.13.0

minimum required webpack version is 4.27.0

the esModule option is true by default

default value of the sourceMap option depends on the devtool option

......

예

the esModule option is true by default

the esModule option is true by default

the esModule option is true by default

the esModule option is true by default

the esModule option is true by default

여기 때문입니다
자르자.

이를 깨닫는 데 밤새 걸렸습니다.

webpack.config.js

{
  // 前略
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          hotReload: true,
        },
      },
      {
        test: /\.css$/i,
        use: [
          "vue-style-loader",
          {
            loader: "css-loader",
            // ココ
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
  // 後略
}

참고

있다면 이렇게 고생하지 않았는데… 강하게 말한다면 공식
출시부터 날이 얕은지 자력으로 webpack 쓰는 사람이 적기 때문인지 소란스러운 사람은 찾지 못했습니다

미해결

이것은 vue를 사용하는 경우에 한한 문제일까?

css-loader의 esModule을 끄지 않고 vue나 /^vue(-style)?-loader$/ 측을 esModule에 대응시키는 것으로 해결할 수 없을까?

로더를 읽는 순서로 대응 시키려면 vue-style-loader

vue-loader은 v14 시점에서 강제로 esModule 스타일입니다.