Using the guides, I try to collect all my styles in one assembly on a 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 a Webpack, it gives an error along these paths, says: you need a special loader:

ERROR in ./fonts/a_coppergothcaps-bold.ttf Module parse failed: Unexpected character '' (1: 0) This file type. (Source code omitted for this binary file)

But I don’t really 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 connects the fonts by the links in them. How to tell Webpack, so as not to try to process these paths, but simply insert them as they are? Or do I incorrectly see the solution to the problem? Maybe I use the wrong typefaces?

These are the rules in the config:

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

    2 answers 2

    Link to full config

    Here is my way to connect 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]' } ] }

    To make it work you need to install the file-loader

    After that, you need to load the fonts in 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 the src/fonts.scss file and the src/variable.scss file for storing variable sizes, colors, etc.
    @import "/fonts.scss"; -> @import "/fonts.scss"; imported into variable.scss @import "/fonts.scss"; and then in any other style file you can import variable.scss . In the definition, the font should not indicate the relative path to the file, but the 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 asked to save the file, it means everything is correct.

    • I understand correctly that ?name=./assets/fonts/webfonts/[name].[ext] is a query where to put the file and with what name? If so, is it better than the outputPath option? And what is the point of two loaders in a row? This is not a chain? Thank. - Aleksandr Shemetillo
    • one
      @AleksandrShemetillo is the path to your font files. Two boot loaders to connect another font folder. I have not figured out yet whether this can be done differently or not. - Bleser
    • And how does the sorting condition between folders work? Or is everything duplicated in both? And you still know this: file-loader works, but only if I insert the @font-face rule directly into the main scss file. If I do @import "typography" and insert the rules there, it gives out> Can't resolve '../../...ttf' in 'C: \ ... \ project \ ... \ scss' For This last path belongs to the main scss file, not the one in which the fonts are specified. That is, the relative path from the wrong place begins. - Aleksandr Shemetillo
    • one
      @Aleksandr Shemetillo 1) I do not understand what sorting condition? The webfonts and webfonts folders contain different fonts. 2) I added the answer, I hope this will help you. - Bleser
    • there it is. And I could not understand what the devserver is about) Thank you for the addition. About sorting: I meant how webpak chooses exactly where to upload the file if two loaders with different paths are declared. - Aleksandr Shemetillo
      module: { rules: [ { test: /\.(svg|png|gif|jpg)$/, exclude: /fonts/, loader: 'file-loader', options: { name: '[name].[ext]' } }, { test: /\.(ttf|eot|woff|svg|woff2)$/, use: { loader: "file-loader", options: { name: `${PATHS.assets}css/fonts/[name].[ext]`, } } },plugins: [ new CopyWebpackPlugin([{ from: `${PATHS.source}/img`, to: `${PATHS.assets}img` }, { from: `${PATHS.source}/static`, to: '' }]) ]}

    In order to avoid conflict, I did so, thank you for raising this question, as well as for the answers given to it.