Импорт шрифтов с использованием @ font-face в веб-пакете - PullRequest
0 голосов
/ 03 апреля 2020

Я пытаюсь использовать шрифт Gilroy на своем веб-сайте, используя @ font-face в веб-пакете.

Вот мой webpack.config. js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['babel-polyfill','./src/js/index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  devServer: {
   contentBase: './dist'
   },
   plugins:[
       new HtmlWebpackPlugin({
           filename: 'index.html',
           template: './src/index.html'
       })
   ],
   module:{
       rules: [
           {
               test: /\.js$/,
               exclude: /node_modules/,
               use: {
                   loader: 'babel-loader'
               }
           },
           {
            test: /\.scss$/,
            use: ['style-loader','css-loader','sass-loader'],
           },
           {
            test: /\.(ttf|eot|woff|woff2|svg)$/,
            exclude: /node__modules/,
            use: [
               {
                 loader: 'url-loader',
                 options: {
                   name:'[name].[ext]' 
                 },
               },
              ],
           },   
            {
            test: /\.(svg|eot|ttf|woff|woff2)$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'file-loader',
                    query: {
                        name: '[name].[ext]',
                        outputPath: './fonts/'
                    }
                }
            ]
        },
       ]
   }
};

После запуска производства В этом режиме шрифты, хранящиеся в моей папке ресурсов в sr c, вводятся в мою папку шрифтов в dist. Однако при использовании моего шрифта изменения не отображаются.

Вот моя файловая структура.

enter image description here

Я вставляю @ font-face в моем main.s css, куда я импортирую другие модули. Вот его изображение.

enter image description here

Я пытаясь затем использовать шрифт Gilroy во внутреннем файле s css. Вот изображение

enter image description here

Изменения шрифта не отражаются, несмотря на то, что они были введены в папку src / fonts и не содержат ошибок в рабочем режиме. Может кто-нибудь, пожалуйста, помогите.

...