NightCatSama/vue-slider-component

[vue3.x] _triangle.scss is using a deprecated symbol

Closed this issue · 9 comments

blazpavlica commented

Describe the bug

PhPStorm reported:

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size, 2)

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

  ╷
7 │     border-width: $size / 2;
  │                   ^^^^^^^^^
  ╵
    node_modules/vue-slider-component/lib/styles/_triangle.scss 7:19  triangle()
    node_modules/vue-slider-component/lib/styles/_triangle.scss 31:7  arrow()
    node_modules/vue-slider-component/lib/theme/default.scss 108:7    @import

Additional context (If there is no relevant content, please delete the block)

Using "vue-slider-component": "^4.0.0-beta.3"

Environment (If you feel unrelated, please delete the block)

  • OS & Version: macOS
  • Vue version: v3.0.11
  • Component Version: v4.0.0-beta.3
NightCatSama commented

fixed @v4.0.0-beta.4

  • 👍2
HIMISOCOOL commented

A version 3.2.12 has been pushed out with this change and it breaks libsass compatibility as math.div has not been implemented there meaning its a breaking change.
This does not match with semantic versioning :(

NightCatSama commented

@HIMISOCOOL What is the version of sass in your project, I use sass@1.34.1 works fine.

Deleted user commented

@NightCatSama Hey,
Since the last update I keep getting this error because of math.div didn't work with node-sass which we use in our project.
node-sass version we use is 4.13.0
Here is the exact log:

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./~/sass-loader/lib/loader.js?sourceMap!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/form/slider_custom.vue
Module build failed: 
    border-width: math.div($size, 2);
                     ^
      Invalid CSS after "...der-width: math": expected expression (e.g. 1px, bold), was ".div($size, 2);"
      in /Users/dshev/Onereach/Platform/onereach-ui/node_modules/vue-slider-component/lib/styles/_triangle.scss (line 9, column 23)
 @ ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./~/sass-loader/lib/loader.js?sourceMap!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/form/slider_custom.vue 4:14-358
 @ ./src/components/form/slider_custom.vue
 @ ./src/main.js
ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./~/sass-loader/lib/loader.js?sourceMap!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/form/slider_custom.vue
Module build failed: ModuleBuildError: Module build failed: 
    border-width: math.div($size, 2);
                     ^
      Invalid CSS after "...der-width: math": expected expression (e.g. 1px, bold), was ".div($size, 2);"
Failed to build. Exiting...
krupasavadiya commented

Same issue, Now it's working for me
I have just remove all previously import scss i.e. default.scss and vue-slider-component.css and just add
import 'vue-slider-component/theme/antd.css'
so it's working fine with latest version i.e. "vue-slider-component": "3.2.12"

NightCatSama commented

@thisninja Are you using yarn or npm, and can you look in the lock file to see what version of sass is referenced by vue-slider-component.

krupasavadiya commented

I am using npm

HIMISOCOOL commented

@HIMISOCOOL What is the version of sass in your project, I use sass@1.34.1 works fine.

@NightCatSama not https://www.npmjs.com/package/sass which is the reference implementation but a much younger and slower package, https://www.npmjs.com/package/node-sass node sass which has been around for much longer, your change is a breaking one and should warrant a minor or major change not a patch change

xvaara commented

@HIMISOCOOL Warning: LibSass and Node Sass are deprecated the first thing in the link you provided. It's time to move on, nobody is updating node-sass.

  • 👎1