Webpack 4 sass-loader 导入文件，路径中没有 ~ 代字号

Question

有没有办法使用第三方 SASS 导入 @import module-name/path 并且仍然有 sass-loader 将文件解析为 node_modules？

如果我把 ~ 放在 @import ~module-name/path 这样的地方，那么 sass-loader 会查看 node_modules 并找到文件，但我无法修改SASS 个文件以添加 ~.

我尝试了一些方法，例如

 rules: [
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "sass-loader",
        options: {
          includePaths: ["node_modules"]
        }
      }
    ]
  }
]

但是模块没有解析。

有什么想法吗？我看到很多其他人也有同样的问题，但只看到添加 ~ 作为真正的修复（我做不到）。

Answer 1

经过多次尝试和努力，我发现这是不可能的 AFAIK，但您可以编写一些东西来枚举您的 includePaths 并将该数组添加到您的配置中。

每个路径的最后部分应该是一个目录，@import 将在其中找到。

对于@import scoped-module-name/path

让你的 includePaths 有了这个：

rules: [
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "sass-loader",
        options: {
          includePaths: ["node_modules/@your_org"] // scoped-module-name exists here
        }
      }
    ]
  }
]

Webpack 4 sass-loader 导入文件，路径中没有 ~ 代字号

Webpack 4 sass-loader import file without ~ tilde in path

javascript

webpack

sass

sass-loader