vue tailwindcss + vuetify

한 개의 Vue 프로젝트 안에서 어드민페이지도 같이 넣어주기 위해서

vue.config.js에서

pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    mngr: {
      entry: 'src/admin/admin.js',
      template: 'public/admin.html',
      filename: 'admin.html',
    }
  }

이런식으로 분리를 해주고

일반 페이지에서는 tailwindcss를 사용하고 admin 페이지쪽에서는 vuetify를 사용하였다.

dev-server로 운영중일 때는 잘 되었었는데 build를 하니까 문제가 발생했다. 양쪽의 css가 다 틀어지는 것이었다.

원인 분석을 해본 결과 css가 제대로 분리가 되지 않고 서로 불러온는 모양이다..

일반페이지쪽은 css가 좀 틀어지는 거지만 어드민페이지쪽은 아예 css가 적용도 안되는 지경이었다.

그래서 postcss.config.js를 수정한 결과 (몇가지를 주석 처리)

module.exports = {
  plugins: {
    tailwindcss: {},
    // 'vue-cli-plugin-tailwind/purgecss': {},
    // autoprefixer: {}
  }
}

어드민페이지 쪽은 정상으로 돌아왔다. 하지만 일반페이지쪽은 아직 틀어져있는 상태.

몇가지 변경하면서 실험해본 결과 admin 단에서 vuetify.css를 불러오면 틀어지고 안불러오면 정상으로 되었다.

그래서 admin.js에서 import로 불러오던 것을 제거하고

admin.html에서 cdn방식으로 불러오게 수정하였더니 양쪽 다 정상 작동하였다.

해결하는데 이틀 꼬박 걸린듯하다..