Search code examples
sasswebpackwebpack-style-loader

webpack bootstrap sass fonts url

I've configured my fonts to be put in a /fonts folder

{test: /\.(eot|svg|ttf)$/, loader: "file?name=fonts/[name].[ext]?[hash]"}

and my sass is being converted to css and extracted to the /css folder as per below

{test: /\.scss/, loader: ExtractTextPlugin.extract("style", "css!sass")}

and

new ExtractTextPlugin("css/styles.css", {
    allChunks: true
})

The issue is that when I view via web browser by using browser sync and serving from my /dist folder which has those 2 folders mentioned above inside, the css tries to load fonts by going to /css/fonts. Can anyone help?

Solution

  • In the end I just had to update my loaders to have a / at the front of my file param e.g.

    {test: /\.(eot|svg|ttf)$/, loader: "file?name=/fonts/[name].[ext]?[hash]"}

    instead of

    {test: /\.(eot|svg|ttf)$/, loader: "file?name=fonts/[name].[ext]?[hash]"}