[CRA] PostCSS (.pcss)를 불러올 수 없을 때.

[SoYoung210]

Desc

CRA Issue Rise 현재는 닫힌 상태이다.

Create React App 으로 프로젝트를 생성하고, craco 를 이용해서 post css 설정을 잡아주어도 여전히 .pcss 를 불러올 수 없는 문제가 있다.

엄밀히 말하면, build는 성공하지만 style이 적용되지 않는다. cra/webpack.config.js 를 참고해보면, sass와 sass module, css파일은 loader가 설정되어 있지만 pcss확장자에 대해서는 설정되어 있지 않아서 이다.

Solve

craco에서 webpack override 옵션을 이용해서 해결할 수 있다.

const { POSTCSS_MODES, ESLINT_MODES } = require("@craco/craco");
const pathResolve = require('path').resolve;

module.exports = {
  style: {
    css: {
      loaderOptions: {
        modules: true,
        localIdentName: '[name]__[local]--[hash:base64:5]',
      }
    },
    postcss: {
      mode: POSTCSS_MODES.file,
      loaderOptions: {
        sourceMap: true,
      },
    }
  },
  webpack: {
    alias: {
      '@': pathResolve('src'),
    },
    plugins: [],
  },
  plugins: [
    {
      plugin: {
          overrideWebpackConfig: ({ webpackConfig, cracoConfig, context: { env } }) => {
            const oneOfRule = webpackConfig.module.rules.find(rule => rule.oneOf);
            if (!oneOfRule) {
              throw Error(`Can't find a 'oneOf' rule under module.rules in the ${env} webpack config!`);
            }

            const cssRule = oneOfRule.oneOf.find(rule => rule.test && rule.test.toString().includes('css'));
            cssRule.test = /\.p?css$/;

            return webpackConfig;
          }        
      },
    },
  ]
};

Refer

craco/recipes/use-a-post-css-config-file