шрифты – How to include fonts when building scss on webpack?

Question:

Using guides, I'm trying to collect all my styles in one assembly on Webpack. There is a main file, another one is imported into it, in which there are several @font-face rules with paths to font files. When building, Webpack throws an error along these paths, says: a special loader is needed:

ERROR in ./fonts/a_coppergothcaps-bold.ttf Module parse failed: Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

But it's not that I need (or need?) to add these files to the assembly. It is enough for me if these rules remain in the assembly, and the browser itself will connect the fonts using the links in them. How to tell Webpack not to try to process these paths but just inject them as is? Or am I misunderstanding the solution to the problem? Maybe I'm using the fonts incorrectly?

Here are the rules in the config:

module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },

Answer:

Link to full config

Here is my way to include fonts for SCSS:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use: [
             {
                 loader: 'file-loader?name=./assets/fonts/webfonts/[name].[ext]'
             },
             {
                 loader: 'file-loader?name=./assets/fonts/Roboto/[name].[ext]'
             }
         ]
}

For this to work, you need to install file-loader

After that, you need to load the fonts into SCSS:

@font-face {
    font-family: 'Roboto Black';
    src: url("/fonts/Roboto/Roboto-Black.ttf");
}

Webpack-dev-server settings:

devServer: {
        contentBase: [path.resolve(__dirname, "build"), path.resolve(__dirname, "assets")],
        compress: true,
        port: 4200,
        historyApiFallback: true,
        noInfo:true
}

UPDATE 1

I have font descriptions in src/fonts.scss file and src/variable.scss file for storing variable sizes, colors, etc.
variable.scss is imported into variable.scss -> fonts.scss @import "/fonts.scss"; and after that in any other style file you can import variable.scss . The definition of a font should not specify a relative path to the file, but a url.
You can test the correctness of the entered address in the browser, for example http://localhost:4200/fonts/Roboto/Roboto-Black.ttf , if you were prompted to save the file, then everything is correct.

Post Views: 4
Scroll to Top