Как я могу использовать шрифты из одной папки в разных проектах с помощью веб-пакета?

Question

Здравствуйте, у меня есть проект, который содержит несколько проектов, и я хотел уменьшить размер проекта, поместив все ресурсы, которые являются общими, в папку. Например, у каждого проекта была своя собственная папка шрифтов, и это привело к тому, что шрифты были импортированы как три раза. Итак, это моя структура проекта:

-project1
  |--subfolders
-project2
  |--subfolders
-shared
  |--fonts
  |--scss
     |--|--fonts.scss
     |--|--global.scss

Итак, в папке fonts у меня есть файлы шрифтов, а в fonts.scss я объявляю их так:

@font-face {
   font-family: 'Cosmica',
   src: url('../fonts/Cosmica.woff2) format('woff2)
}

и в global.scss, который импортируется другими проектами, я делаю такой импорт @import "./fonts"

Затем, когда проект собирается, я получаю эту ошибку These relative modules were not found: ../fonts/Cosmica.woff2 in ./nodule_modules/css-loader...

И это ошибка, которая отображается в браузере:

Module not found: Error: Can't resolve '../fonts/Cosmica.woff2' in '/Users/blabla/projects2/src/assets/scss

Это то, что, как мне кажется, делает импорт шрифтов в веб-пакете:

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  },

Есть идеи, как поступить? Это существующий проект, и я понятия не имею, как работает веб-пакет.

Answer 1

1. Установить загрузчик файлов

npm install file-loader --save-dev

2.Добавить файл-загрузчик в webpack.config.js

module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'build.js',
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            }
        ],
    },
    watch: true,
};

Проверьте эту ссылку, она может помочь вам: https://chriscourses.com/blog/loading-fonts-webpack