CODEWITHSUNDEEP
sasswebpackwebpack-style-loader
the-a-train
the-a-train

Reputation: 1143

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?

Upvotes: 1

Views: 329

Answers (1)

the-a-train
the-a-train

Reputation: 1143

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

Upvotes: 2

Related Questions