Question

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

5px

所以在fonts文件夹中，我有我的字体文件，在fonts.scss中，我这样声明它们：

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

，在其他项目正在导入的global.scss中，我正在像这样@font-face { font-family: 'Cosmica', src: url('../fonts/Cosmica.woff2) format('woff2) }

进行导入

然后在项目构建时出现此错误@import "./fonts"

这是浏览器中显示的错误：

These relative modules were not found: ../fonts/Cosmica.woff2 in ./nodule_modules/css-loader...

这是我想在webpack中导入字体的内容：

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

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

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

如何使用Webpack在不同项目中的一个文件夹中使用字体？

1 个答案: