CODEWITHSUNDEEP
javascriptreactjswebpackrequire
saawsann
saawsann

Reputation: 685

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"]
      },
      ...
    ]
  },
  ...
}

Upvotes: 6

Views: 4191

Answers (3)

antoni
antoni

Reputation: 5546

I needed a different solution than the accepted one:

  /* webpackIgnore: true */
  background: url('/api/assets/?image=background.webp');

Did the trick. In my case, I wanted to skip resolving a path that I want to resolve by calling the backend, so it has to stay like this and should not be resolved by Webpack.

I found this comment syntax /* webpackIgnore: true */ from the Webpack documentation.

[EDIT]

When I tried to build, the Webpack comment got stripped (I'm using Vue) by postcss & cssnano, and I had to write it this form so the comment is preserved and it also passes the build: /*! /* webpackIgnore: true */

Upvotes: 2

Dustin Gogoll
Dustin Gogoll

Reputation: 231

This question might be a little old, but I still want to correct the answer.

When you want to use the array syntax, you basically define all the options for every single loader. In order to do so you have to use an object for the loader in the array. So instead of

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

You have to write

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

},

Upvotes: 5

saawsann
saawsann

Reputation: 685

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

Upvotes: 0

Related Questions