지난 주 강의 antd next.config.js 설정 관련 질문

[Hyun2]

좋은 강의 잘 듣고 있습니다 😁

지난 주 강의 중에 antd less로 설정하는 방법 설명해주셨는데, tailwindcss랑 함께 설정은 안되어서 시간 관계 상 끝까지 진행하지는 않았잖아요? 그 부분 관련해서 질문 드려요.

지난 주 강의 내용에서 tailwind 설정 빼고 antd less 설정만 넣으니까 antd 설정은 되더라구요.

//next.config.js

const withLess = require("@zeit/next-less");

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
});

그리고 그 상태에서 2주차 수업에서 소개해주신 방법대로 nprogress를 적용해보려고 했거든요? 아래와 같은 에러가 나오더라구요.

error - ./node_modules/nprogress/nprogress.css 2:0
Module parse failed: Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* Make clicks pass-through */
> #nprogress {
|   pointer-events: none;
| }

next.config.js를 아래와 같이 수정했더니 nprogress 에러는 없어졌는데, nprogress는 동작을 안하네요.

//next.config.js

const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
    },
  }),
});

next.config.js 파일명을 _next.config.js 로 변경하고 antd.less 파일 import 제거 했더니, nprogress는 동작 하더라구요. antd less 설정과 동시에 nprogress 동작하도록 할 수 있는 방법을 찾지 못하겠는데, 어떻게 해야할까요...?

테스트 해 본 코드는 https://github.com/Hyun2/antd-tailwind-nprogress 이것입니다.

[unk]

현재 세팅해놓으신 상태에서는 import한 css가 실제적으로 로드되지 않아 #nprogress 에 대한 아무런 스타일이 적용되지 않는 상태로 보입니다.

less와 postcss 세팅을 개별적으로 할 경우 다른 한 쪽의 설정이 무시되는 현상이 있는 것 같고, less 설정 내에 postcss loader 설정을 하거나, 반대로 postcss 설정 내에 less loader 설정을 해야 할 것 같습니다.

웹팩이나 postcss 설정 같은 부분은 저도 잘 모르는 부분이라... 키워드까지는 찾았는데 실제 적용에는 실패했습니다 ㅡㅜ

[Hyun2]

네~ 답변 감사합니다!! 답변 주신 거 바탕으로 한 번 더 찾아볼게요.