dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
https://craco.js.org
Apache License 2.0
7.43k stars 499 forks source link

Setting SASS quietDeps to true not working #507

Closed jamiek-acl closed 1 year ago

jamiek-acl commented 1 year ago

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.

stevenewald commented 1 year ago

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.