You can write different rules for css and scss files where u can remove sass loader for css files.

test: /\.scss$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
  {
    loader: 'sass-loader'
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]


test: /\.css$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
//removed sass loader
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]

Below is my personal setup for css & scss files

webpack.config.js

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 3,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

postcss.config.js

module.exports = {
    plugins: [
        require('postcss-cssnext')({
            warnForDuplicates: false,
            features: {
                customProperties: false,
            },
        }),
        require('postcss-flexbugs-fixes')(),
        process.env.NODE_ENV === 'production'
            ? require('cssnano')({
                    preset: 'default',
              })
            : '',
    ],
};

A fresh solution for those who are looking for a way to fix the warning in Vite:

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

The quietDeps: true rule mentioned above does not work for this warning.

The most preferable way is to make Vite to use modern API for SASS:

    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler', // or 'modern'
                },
            },
        },
    },

Vite docs: css.preprocessorOptions

But if you want to just silence deprecation warnings, use silenceDeprecations option:

    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    silenceDeprecations: ['legacy-js-api'],
                },
            },
        },
    },

SASS docs for silenceDeprecations SASS Deprecations list

Both solutions work on Vite 5.4.6, and Sass 1.79.1

@Arnelle Balane That ticked solution won't work with upgraded webpack and sass-loader.

This is the latest working model using:

• "webpack": "^4.44.1",
• "sass-loader": "~9.0.3",

{
    test: /.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        use: [
          {
            loader: 'css-loader'
          }, 
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                outputStyle: 'expanded'
              }
            }
          }
        ]
    })
}