dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

Home Page:https://craco.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Setting SASS quietDeps to true not working

jamiek-acl opened this issue · comments

What's happening
I'm trying to modify the SASS config via craco, but my settings aren't working. I'm possibly doing the config wrong but it looks correct as per the documentation and other things I have read online. I've tried various configs as noted below. Any guidance would be appreciated.

What should happen
The SASS deprecation warnings should be silenced when I start my app.

CRACO version
^5.8.0

CRACO config

module.exports = {
  webpack: { ... },
  eslint: { ... },
  style: {
    css: { ... },
    sass: {
      loaderOptions: (sassLoaderOptions, { env, path }) => {
        // Below are the different configs I have tried:

        // dies with validation error: unknown property 'quietDeps'
        // return { ...sassLoaderOptions, quietDeps: true };
        
        // dies with validation error: unknown property 'options'
        // return {
        //   ...sassLoaderOptions,
        //   options: {
        //     quietDeps: true,
        //   },
        // };
        
        // still shows warnings as builds
        // return {
        //   ...sassLoaderOptions,
        //   sassOptions: {
        //     quietDeps: true,
        //   },
        // };
        
        // still shows warnings as builds
        // return {
        //   ...sassLoaderOptions,
        //   sassOptions: {
        //     quiet: true,
        //   },
        // };
        
        // still shows warnings as builds
        // return {
        //   ...sassLoaderOptions,
        //   sassOptions: {
        //     options: {
        //       quietDeps: true,
        //     },
        //   },
        // };
        
        // still shows warnings as builds
        return {
          ...sassLoaderOptions,
          sassOptions: {
            options: {
              quiet: true,
            },
          },
        };
      },
    },
  },
};

package.json

"@craco/craco": "^5.8.0",
"react-scripts": "4.0.3",
"sass": "^1.49.8",

Thank you.

commented

Below is the correct configuration.
return { ...sassLoaderOptions, sassOptions: { quietDeps: true, }, };

Testing on craco v7.1.0 and sass ^1.49.8, this configuration works correctly and dependency warnings are hidden.

Note that this configuration option is known to be nonfunctional below sass 1.35.0, so ensure you have the correct version installed.

Additionally, from sass documentation,

Stylesheets that are imported relative to the entrypoint are not considered dependencies.

So if you're importing with a relative path (such as "./dependency"), they will not be treated as a dependency and will print the warnings regardless.