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导入文件，路径中不带〜波浪号

1 个答案: