css-loader localIndentName

[SoYoung210]

Desc

{
          test: /\.p?css$/,
          exclude: [/node_modules/, /billboard.js/],
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                modules: {
                  localIdentName: '[local]_[hash:base64:5]',
                },
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },

css loader에서 class name 중복을 막기위해 localIndentName을 사용하고 있다.

다양한 컴포넌트에서 wrap 등의 className을 공통적으로 사용하기 위해.

But 3rd Party lib인 billboard.js 의 스타일을 덮어쓰는 방식에서 오류가 생겼다.

className이 변환되기 때문에 적용한 스타일이 먹지 않음.

Conclusion

postcss-loader와 css-loader를 분리하여, 해당 로더에는 localIndentName속성을 제거한다