时间戳

首页 > 解决方案 > 如何使用 webpack 在不同项目中使用一个文件夹中的字体？

node.js - 如何使用 webpack 在不同项目中使用一个文件夹中的字体？

问题描述

您好，我有一个包含多个项目的项目，我想通过将所有共享的资产放在一个文件夹中来减小项目的大小。例如，每个项目都有自己的字体文件夹，这导致字体导入了 3 次。所以这是我的项目结构：

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

所以在字体文件夹中我有我的字体文件，在 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

这就是我猜在 webpack 中导入字体的原因：

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

知道如何进行吗？这是一个现有的项目，我不知道 webpack 是如何工作的。

标签： node.jswebpackfonts

解决方案

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

推荐阅读