javascript - Webpack 4 通过别名导入 scss

Question

所以我有一个 Node 脚本运行 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 文件具有用于加载非相对路径的特殊语法(应以 ~ 开头)。 IE。而不是 @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 的 resolve.alias 作用相同选项。根据文档别名仅适用于 module paths .在您的情况下指定了相对路径。

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

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

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