When using dart-sass deep selector fails

[gunta]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [v] I am running the latest version
• [v] I checked the documentation and found no answer
• [v] I checked to make sure that this issue has not already been filed
• [v] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Work when using along with dart-sass

Current Behavior

Fails to work when using along dart-sass, and probably will fail in the future with node-sass also.

Failure Information (for bugs)

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  /deep/ i {
 ^
      Expected selector.
   ╷
77 │   /deep/ i{
   │   ^
   ╵
  stdin 77:3  root stylesheet
      in vue-argon-dashboard-pro/src/components/BaseButton.vue (line 77, column 3)

Seems to be solved with ::v-deep https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements https://github.com/vuejs/vue-loader/issues/1407

[cristijora]

Hey @gunta Unfortunately we don't use dart sass as it has some other restrictions besides this deep selector. We'll try to modify the css so it doesn't use deep selectors at all so it's easier to switch if needed

[cristijora]

Released a new version v.1.1.1 in which the deep selector is removed and transitioning to dart-sass should be easier now