Dealing with Sass Deprecation Warnings in Angular 19

Friday, December 6, 2024

#how-to #angular 19 #sass #deprecation #warning

sass deprecation warnings with Angular 19 update

With the release of Angular 19, developers are seeing significant improvements, new features, and streamlined workflows.

Along with these enhancements, you might encounter deprecation warnings from the Sass compiler when building your project. These warnings can be confusing, especially if they originate from third-party libraries.

Table of Contents

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular sass deprecation warnings

The output may resemble this:

▲ [WARNING] Deprecation [plugin angular-sass]

    src/scss/styles.scss:19:8:
      19 │ @import "custom";
         ╵         ^


  Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
  
  More info and automated migrator: https://sass-lang.com/d/import

  The plugin "angular-sass" was triggered by this import

    angular:styles/global:styles:1:8:
      1 │ @import 'src/scss/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~~~~~~

These warnings arise due to the sass compiler being updated to version 1.80.x, which enforces stricter checks.

How to disable sass deprecation warnings in Angular 19

The good news is that Angular 19 introduces helpful settings in the Sass preprocessor options that address issues related to deprecation warnings.

The subsequent options have been included to enhance Sass integration:

futureDeprecations: This option specifies features scheduled for deprecation. The compiler will treat these features as active and issue warnings accordingly.
fatalDeprecations: This option identifies Sass features already deprecated and will cause the build to fail.
silenceDeprecations: This option suppresses deprecation warnings for specific versions.

The last option allows developers to silence sass deprecation warnings in Angular 19.

To implement the necessary changes, simply incorporate the following configuration, stylePreprocessorOptions.sass.silenceDeprecations, into the architect.build.options section of your angular.json file, like this:

{
  "projects": {
    ...
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "sass": {
                "silenceDeprecations": ["color-functions", "global-builtin", "import", "mixed-decls"]
              }
            }
          }
        }
      },
    ...
  }
}

This enhancement aims to address and mitigate any recently introduced Sass deprecation warnings. However, it is important to note that they do not address the root cause of the warnings but merely mute them.

References

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 20 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.

Subscribe to our newsletter

Get early information about new products, product updates and blog posts.