javascriptreactjswebpackrequire

How to NOT resolve paths with Webpack?


I'm working on a ReactJs project with Webpack and sass-loader, css-loader & url-loader.

I would like to not resolve the font-face paths and keep it exactly how it was set in the SASS file.

The issue:

If I call an absolute path (ie: http://fonts.com/my-font.eot or /path/to/my-font.eot), the path is not resolved.

However, if I use a relative path (ie: my-font.eot or path/to/my-font.eot), url-loader tries to resolve the path.

In my case, I need to use a relative path (even if it generates a 404 error).

What I tried:

I tried to exclude all font extensions in the url-loader, but Webpack doesn't know what to do with this type of file even if the file potentially doesn't exist.

Here the error I get:

Module parse failed: C:....\fonts\my-font.eot Unexpected character ' ' (1:1) You may need an appropriate loader to handle this file type.



I also tried to disable the "url" option of css-loader, but absolutely nothing happens. I guess it is highly possible that I didn't add the option correctly:

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},



Here is what my current code looks like :

module: {
    loaders: [
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.scss$/,
          /\.json$/,
          /\.svg$/
        ],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'path/dist/[name].[hash:8].[ext]'
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      ...
    ]
  },
  ...
}

Solution

  • I found the solution. I wasn't adding the css-loader option properly.

    Because I didn't find a way to add options directly using the array syntax, I had to switch to the string syntax.


    This code doesn't work:

    {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        options: { url: false }
    },
    


    This code works:

    {
        test: /\.scss$/,
        loader: 'style!css?url=false!sass'
    }