How to correctly implement scss/sass?

Question

Having an issue with Next.js regarding its Webpack and how it handles SCSS APP.

When I'm adding this to my next.config.ts:

  webpack(config, { isServer }) {
    if (!isServer) {
      config.module.rules.push({
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      });
    }
    return config;
  },

I get no errors at all, but styles aren't applied to any DOM element. I mean it is showing as a class using devtools but the element doesn't change at all and doesn't recognize any rule at all.

But if I remove this code above, everything works but then I get error of this:

Import trace for requested module:
./src/UI/Button/Button.module.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[7].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[7].use[5]!./src/UI/Button/Button.module.scss
./src/UI/Button/Button.module.scss