编辑1

Question

所以我有一个节点脚本运行webpacking很多文件夹，用于我们服务器上的不同安装，

            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                minimize: true,
                alias: {
                  './assets/images': imagesPath,
                  './bootstrap/config': resolve(`/External_Assets/LocalFiles/${item.id}/_config.scss`)
                }
              }
            },

item.id只是包含scss变量配置文件的文件夹的路径。当我们在本地构建项目时，我们只有一个配置文件，如此引用

@import './bootstrap/config';

这就像别名中引用的路径一样，为什么这不起作用？它仍然可以从旧文件夹中获取变量。我还没有找到任何其他对该文件的引用。

Answer 1

编辑1

以gist作为工作示例。

要点：

移动别名以解决问题。当您使用_config.scss文件时，我猜在sass-loader之前运行css-loader并且它不起作用，因为在那个时间点没有别名。
我无法使别名适用于特定的.scss文件，但您只需指向该文件夹即可 - bootstrap': resolve(`/External_Assets/LocalFiles/${item.id}`)
.scss文件具有加载非相对路径的特殊语法（应以〜开头）。即而不是@import 'bootstrap/config';应该是@import '~bootstrap/config

配置：

module.exports = {
  // ...
  resolve: {
    alias: {
      'assets/images': imagesPath, 
      'bootstrap': resolve(`/External_Assets/LocalFiles/${item.id}`)
    }
  },
  module: {
    rules: [
      // ...  
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              minimize: true,
            }
          },
          "sass-loader",
        ]
      }
    ]
  }
}

.scss档案中的参考：

@import "~bootstrap/config";

旧答案

css-loader的别名与webpack＆＃39; resolve.alias选项的工作方式相同。根据文档，别名仅适用于module paths。在您的情况下，指定了相对路径。

要使其正常工作，您可以在加载程序配置中使用以下选项：

alias: {
    'assets/images': imagesPath,
    'bootstrap/config': resolve(`/External_Assets/LocalFiles/${item.id}/_config.scss`)
    }

然后将导入更改为 @import 'bootstrap/config';

Webpack 4通过别名导入scss

1 个答案:

编辑1

旧答案