개발/Today I Learned
'/deep/' selector is not working
devmomori
2022. 7. 14. 19:57
차트 라이브러리 개발 도중 마주친 에러
- 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 {}
비슷한 문제를 스택오버플로우에서 발견
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 된 걸 쓸 이유가 있을까?
::v-deep으로 모두 교체하여 해결
Vue3 에서는?
:deep(.child-class) 로 사용!
결론
Vue2 : /deep/ 대신 ::v-deep을 사용하자
Vue3 : :deep(.child-class) 를 사용하자
기존 프로젝트가 모두 /deep/으로 되어있어서 교체 후 테스트 하는 별도의 과정이 필요하지만, 이후를 생각하면 이게 더 낫다!
- -컴포넌트 내부에서 스타일을 scoped로 제한하고 있다면 deep selector를 최대한 쓰지 않는게 유지보수가 편하다.
- -정말 어쩔 수 없는 경우라면.. deep으로 하겠지만, 쉬운방법을 찾다보면 그게 쌓이고 쌓인다 .
Vue2, Vue3 같은 Vue인데 조금씩 너무 다르다..