CRA에서 .less파일 사용하기

 

react 18버전이후 config를 ejecting할 필요없이 CRA한 프로젝트에서 .less파일을 사용할 수 있다

 

먼저 react-app-rewired를 설치한다

npm i react-app-rewired

 

less와 less-loader을 설치한다

npm install less less-loader --save-dev

 

package.json의 scripts를 아래와 같이 수정한다.

 "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",

 

앱에 추가해야할 config를 추가하기 위해 최상단 위치에 config-overrides.js 파일을 만들어서 아래의 코드를 입력한다.

module.exports = function override(config, env) {
  config.module.rules[1].oneOf.splice(2, 0, {
    test: /\.less$/i,
    exclude: /\.module\.(less)$/,
    use: [
      { loader: "style-loader" },
      { loader: "css-loader" },
      {
        loader: "less-loader",
        options: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
    ],
  })

  return config
}

 

 

 

참고