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