Import mixins & variable to all scss modules automatically

[TheDarkStrix]

Summary

I have the styles folder with contains _mixin.scss & _variables.scss .

• src
  • styles
    • mixin.scss
    • variables.scss

With this , i want to automatically import these mixin.scss and variables.scss into all my *.module.scss file. Unfortunately trying the webpack & the sassOptions , in not correctly importing these files . Not sure what i am doing wrong here . Any help regarding this would be greatly appreciated .

Note : I would want to automatically import it to all the *.module.scss files not a regular .scss file

Additional information

next.config.ts :

import { Configuration } from 'webpack';

const nextConfig = {
  webpack(config: Configuration, { isServer }: { isServer: boolean }) {
    if (!config.module) {
      config.module = { rules: [] };
    }
    
    if (!config.module.rules) {
      config.module.rules = [];
    }

    config.module.rules.push({
      test: /\.module\.scss$/,
      use: [
        {
          loader: "sass-loader",
          options: {
            additionalData: `@use "@/styles/mixin" as *;`,
          },
        },
      ],
    });

    return config;
  },
};

Example

No response

[hope-423126]

Hi, there.
To enable auto-import of .scss file, we need to setup next.config.js with "additionalData" in sassOptions.
Did you consider this?