Webpack 5 with sass (dart scss) gives warningns

I moved to webpack 5, sass (dart sass v 1.32.8) and getting these errors:

DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$yellow-20: null` at the root of the
stylesheet.
     ╷
5862 │   $yellow-20: #fdd13a !default !global;
     │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src/client/styles/main.scss 5862:3  carbon--colors()
    src/client/styles/main.scss 6034:1  root stylesheet
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$yellow-30: null` at the root of the
stylesheet.
     ╷
5863 │   $yellow-30: #f1c21b !default !global;
     │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src/client/styles/main.scss 5863:3  carbon--colors()
    src/client/styles/main.scss 6034:1  root stylesheet
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$yellow-40: null` at the root of the
stylesheet.

Issue Analytics

State:
Created 3 years ago
Comments:11 (10 by maintainers)

Top GitHub Comments

3reactions

huinengcommented, May 21, 2021

there’s a new one coming up in sass 1.33.0

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

Recommendation: math.div($step - 2, 4)

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

3reactions

tay1orjonescommented, Mar 11, 2021

It’s worth noting that Dart Sass 2.x isn’t available, and it doesn’t look like there’s even a roadmap for it. In a recent comment from a maintainer they sound to be actively avoiding bumping to a new major. Latest is v1.32.8 right now.

We can/should update the syntax here but for now this is just a warning. If the --quiet-upstream flag becomes available it could be used to suppress this warning message.

Top Results From Across the Web

sass-loader - webpack - JS.ORG

This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use. Note. We highly recommend...

vue.js - Error compiling custom variables (sass-loader failed)

In my experiments, additionalData for both sass and scss was needed to bring in the global variables.scss . Example: // vue.config.js module.

Webpack 5 CSS Walkthrough: Sass, PostCSS and more!

A thorough walkthrough of setting up different CSS configurations for Webpack 5. This includes basic CSS, SASS, PostCSS with fallbacks and ...

One quick way to get ready for Carbon v11 | by Taylor Jones

Depending on the sass language features your project is using, you may encounter deprecation warnings or other messages after swapping out node-sass for...

sass | Dart Package - Pub.dev

load-css() and shared modules that contained no CSS themselves but loaded CSS from other modules. Dart API #. Emit a deprecation warning when...