webpack sass-loader ` An @import loop has been found:`

Question

I'm trying to update sass-loader and webpack to latest version but i'm getting an error: An @import loop has been found:

I need to import two files using additionalData property of sass-loader which is like this:

{
     loader: 'sass-loader',
     options: {
               sourceMap: true,
               additionalData: '@import "sass/_themes.scss";@import "sass/_variables.scss"; ',
               sassOptions: {
                   exclude: 'src/store', // the components that are using the `_themes.scss` are located here
                   includePaths: [path.resolve(__dirname, './src')],
               },
     },
}

and in some of my components i should use import {Theme} from 'sass/_themes.scss' This is where i face the issue of :

SassError: An @import loop has been found:
           sass/_themes.scss imports sass/_themes.scss
        on line 1 of sass/_themes.scss

How can i exclude those components from this additionalData import?

Answer 1

The option additionalData also accepts a function, you can write some conditions in there. For example:

additionalData = (content, loaderContext) => {
  const { resourcePath, rootContext } = loaderContext;

  const relativeFilePath = path.relative(rootContext, resourcePath);
  const isExcluded = relativeFilePath.match(/^src\\store\\.*/);

  return isExcluded
    ? content
    : '@import "sass/_themes.scss";@import "sass/_variables.scss";' + content;
};