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

Question

Is there a way to use third-party SASS with imports like @import module-name/path and still have sass-loader resolve the files to node_modules?

If I put the ~ in like @import ~module-name/path this works and sass-loader looks into the node_modules and finds the files, but I am unable to modify the SASS files to add the ~.

I have tried a few things such as

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

but the modules do not resolve.

Any ideas? I see lots of other folks with the same issue but only see adding ~ as a real fix (which I can't do).

Answer 1

After much trial and effort, I found this is not possible AFAIK, but you can write something to enumerate your includePaths and add that array to your config.

The last part of each path should be a directory where an @import would be found.

For @import scoped-module-name/path

Have your includePaths with this:

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
        }
      }
    ]
  }
]