'/deep/' selector is not working

차트 라이브러리 개발 도중 마주친 에러

- vue2.x 사용

vue-cli-service build --target lib --name index [entry]

뷰 컴포넌트를 라이브러리로 만든 후, 해당 라이브러리를 다른 서비스에서 사용하려했지만 다음과 같은 에러가 발생했다.

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.

& /deep/ .class-name {}

비슷한 문제를 스택오버플로우에서 발견

The `/deep/` selector is not working using sass-loader in my VueJS application

sass-loader에서 node-sass를 사용하도록 변경하면 해결할 수 있다.

Vue Config 설정 변경

css: {
  loaderOptions: {
    sass: {
      implementation: require("node-sass"),
    },
  },
},

Dart Sass

- https://github.com/sass/dart-sass#why-dart

node-sass
- https://github.com/sass/node-sass

Deprecated 된 걸 쓸 이유가 있을까?

dart-sass does not support /deep/ selector · Issue #3399 · vuejs/vue-cli

::v-deep으로 모두 교체하여 해결

Vue3 에서는?

How do I use /deep/ or >>> or ::v-deep in Vue.js?

:deep(.child-class) 로 사용!

결론

Vue2 : /deep/ 대신 ::v-deep을 사용하자
Vue3 : :deep(.child-class) 를 사용하자

기존 프로젝트가 모두 /deep/으로 되어있어서 교체 후 테스트 하는 별도의 과정이 필요하지만, 이후를 생각하면 이게 더 낫다!

• -컴포넌트 내부에서 스타일을 scoped로 제한하고 있다면 deep selector를 최대한 쓰지 않는게 유지보수가 편하다.
• -정말 어쩔 수 없는 경우라면.. deep으로 하겠지만, 쉬운방법을 찾다보면 그게 쌓이고 쌓인다 .

Vue2, Vue3 같은 Vue인데 조금씩 너무 다르다..