Question

我将webpack用于以下规则：

{
    test: /\.(html|css)/,
    use: [{
      loader: 'file-loader',
      options: {
        exportAsEs6Default: true,
      },
    }],
  },
  {
    test: /\.(less|css)$/,
    // include: /node_modules/,
    use: [{
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
      options: {
        paths: [
          path.resolve(__dirname, 'node_modules'),
        ],
      },
    }

现在，在名为styles.less的文件中，我有两个import语句：

@import '@xyz/variables/global.less';
@import '@xyz/common/styles.less';

@xyz是一个npm软件包，其中包含我感兴趣的所有较少文件。 global.less中定义了所有全局变量。

styles.less具有：

@import "./normalize";
@import (multiple) "./common-dark";
@import (multiple) "./common-light";

common-dark具有：

.dark {
    @import (reference, multiple) "@xyz/variables/dark";
    @import "common";
}

现在，“ @ xyz / variables / dark”中有一个变量@layer2，但是在webpack构建期间，它总是抛出错误，表明@layer2未定义。如果我这样导入该特定文件，则该变量变为可用：

@import '@xyz/variables/dark.less';

因此，我的问题是，如果导入的文件较少而又导入了较少的文件，那么，如果仅导入较少的主文件，是否所有引用的文件都可用？

较少-较少文件中引用的文件不会导入

0 个答案: