How can I disable sass warning for external classes

Kimor 0
Viewed 26

I have a react project. As I've seen that node-sass is being deprecated I tried to update it, using Dart sass.

Thing is, when I want to build my application I get a lot of warning coming from files I don't have any control of.

SO, when I run npm run build it is actually configured to run "build": "react-scripts build" into my package.json.

Then in my webpack.config, under the module, rules section I have:

            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'sass',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },

Which is creating a lot of Deprecation warning, but here is the stack trace for the warning:

node_modules/bootstrap/scss/vendor/_rfs.scss 49:24  @import
node_modules/bootstrap/scss/_mixins.scss 6:9        @import
src/_metronic/_assets/sass/_init.scss 37:9          @import
stdin 8:9                                           root stylesheet

As you can see this is pointing to files into my node_module project. Indeed, if I go to src/_metronic/_assets/sass/_init.scss the line causing the issue is:

@import "~bootstrap/scss/mixins";

As we are using a template to avoid design issue and questioning I'd really like to keep the .scss file as it is.

I tried the quietDeps option and to add an exclude key with the node_modules folder but it does not work.

Do you have any idea about how to do this ?

Thanks

webpack sass reactjs
1 Answers

Using the @import in Dart Sass is deprecated and will be over the next few years removed.

Load bootstrap mixins with @use:

@use "bootstrap/scss/mixins" as bs-mixins;

.img-fluid {
  @include bs-mixins.img-fluid();
}

Tested with: Webpack 5.74.0, sass 1.54.9, sass-loader 13.0.2. No warnings.

biodiscus0
Related