webpack sass-loader '发现@import循环:'

jaxagkaj  于 2023-02-16  发布在  Webpack
关注(0)|答案(1)|浏览(590)

我尝试更新sass-loader和webpack到最新版本,但我得到一个错误:An @import loop has been found:
我需要使用sass-loader的additionalData属性导入两个文件,如下所示:

{
     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')],
               },
     },
}

在我的一些组件中,我应该使用import {Theme} from 'sass/_themes.scss',这就是我面临的问题:

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

如何从该附加数据导入中排除这些组件?

7kqas0il

7kqas0il1#

选项additionalData也接受一个函数,你可以在里面写一些条件,例如:

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;
};

相关问题