Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack 5 with sass (dart scss) gives warningns

See original GitHub issue

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...