search

ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.1k stars 14.64k forks source link

[Bug Report] Error occurs while preprocessing scss style with dart-sass #21980

Open lumdzeehol opened 2 years ago

lumdzeehol commented 2 years ago

Element UI version

2.15.9

OS/Browsers version

103.0.5060.114（正式版本） (arm64)

Vue version

2.6.11

Reproduction Link

https://codesandbox.io/s/delicate-pine-cu89x0?file=/src/App.vue

Steps to reproduce

1.使用 dart-sass 作为preprocessor 2.引入 $--breakpoints 变量并使用

  1. 报错

What is Expected?

正常编译

What is actually happening?

Error， 报错如下： expected "(". ╷ 17 │ @media only screen and "(min-width: 768px) and (max-width: 991px)"{ │ ^ ╵ stdin 17:28 res() stdin 27:7 root stylesheet

eddie-englund commented 1 year ago

Hi,

I'm having similar issues with Vite and and dart-sass. This is causing some styling issues. Did you ever find a solution to this?

Below is a partial of the error logs.


32 │     margin-right: #{$--tooltip-arrow-size / 2};
   │                     ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 32:21         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2) or calc($--tooltip-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
51 │     margin-right: #{$--tooltip-arrow-size / 2};
   │                     ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 51:21         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2) or calc($--tooltip-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
51 │     margin-right: #{$--tooltip-arrow-size / 2};
   │                     ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 51:21         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2) or calc($--tooltip-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
70 │     margin-bottom: #{$--tooltip-arrow-size / 2};
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 70:22         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2) or calc($--tooltip-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
70 │     margin-bottom: #{$--tooltip-arrow-size / 2};
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 70:22         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2) or calc($--tooltip-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
89 │     margin-bottom: #{$--tooltip-arrow-size / 2};
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 89:22         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($--tooltip-arrow-size, 2) or calc($--tooltip-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
89 │     margin-bottom: #{$--tooltip-arrow-size / 2};
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 89:22         @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/popper.scss 4:1           @import
    node_modules/element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9  @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 4:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: $weight: Passing a number without unit % (0) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

  ╷
7 │   color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
  │          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 7:10             genTheme()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 127:5            @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 112:7  m()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 126:3            @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 94:1             @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 6:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: $weight: Passing a number without unit % (0) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

  ╷
7 │   color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
  │          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 7:10             genTheme()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 127:5            @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 112:7  m()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 126:3            @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 94:1             @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 6:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Deprecation Warning: $weight: Passing a number without unit % (0) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

   ╷
14 │     color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
   │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 14:12            genTheme()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 127:5            @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 112:7  m()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 126:3            @content
    node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss 74:5   b()
    node_modules/element-ui/packages/theme-chalk/src/tag.scss 94:1             @import
    node_modules/element-ui/packages/theme-chalk/src/select.scss 6:9           @import
    node_modules/element-ui/packages/theme-chalk/src/pagination.scss 4:9       @import
    node_modules/element-ui/packages/theme-chalk/src/index.scss 2:9            @import
    src/scss/_colors.scss 13:9                                                 @use

Warning: 43 repetitive deprecation warnings omitted.