使用 webpack 导入材料设计标志性字体答案

【问题标题】：Importing material design iconic font using webpack使用 webpack 导入材料设计标志性字体
【发布时间】：2018-04-03 16:00:27
【问题描述】：

在使用 webpack 导入 material design iconic fonts 时，我已经尝试了几个小时，但没有成功。

我的 webpack.config.js

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        },
        {
            test: /\.(svg|eot|woff|ttf|svg|woff2)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: "fonts/[name].[ext]"
                    }
                }
            ]
        }
    ]
...

我的 app.js 文件

import 'material-design-iconic-font/dist/css/material-design-iconic-font.css';

我的 webpack 输出控制台

Built at: 2018-4-3 12:48:40
                                  Asset      Size  Chunks             Chunk Names
fonts/Material-Design-Iconic-Font.ttf  96.9 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff2  37.5 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff  49.1 KiB          [emitted]  
4a37f8008959c75f619bf0a3a4e2d7a2.png  4.86 KiB          [emitted]

但我在设置时没有得到任何图标

<i class='zmdi zmdi-money'></i>

拜托，冷，有人帮帮我吗？谢谢。

【问题讨论】：

我没有答案，但也许你可以试试material-icons

标签： javascript material-design webpack-file-loader

【解决方案1】：

仔细检查添加的材料设计内联样式我注意到以下声明：

url("fonts/Material-Design-Iconic-Font.woff2")

这就是它不起作用的原因。导入图标的 js 文件放在 js 文件夹 (appname/js) 中，当执行页面本身时，浏览器试图获取 localhost:8080/appname/fonts/Material-Design-Iconic-Font.woff2. 根本不存在的东西。（一旦在 js 文件夹“appname/js/fonts...”中创建字体页面）

为了解决这个问题，我把 webpack.config.js 文件改成了

{
    test: /\.(svg|eot|woff|ttf|svg|woff2)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: "[path][name].[ext]"
            }
        }
    ]
}

现在检查结果内联样式，我得到

url(node_modules/material-design-iconic-font/dist/fonts/Material-Design-Iconic-Font.woff2)

现在浏览器可以加载它并且图标显示正确。

【讨论】：