5.1 file-loader 解析字体

1、安装下载loader:

    npm i file-loader -D

2、在 webpack.config.js 中配置loader

module.export = {

    mode: 'development',

    entry: './src/index.js',

    output: {

        filename: 'main.js',

        path: path.reslove(__dirname, 'dist')

    },

    module: {
        rules: [{

            test: /\.(woff|woff2|eot|ttf|otf)$/,

            use: 'file-loader',

        }]

    }

}

3、将字体文件放入创建的 font 文件夹中


4、把引入进来的字体在一个 css 文件中进行定义

5、通过 import 的方式引入到要使用的文件中

    例子:import "xx/xxx/font.css"

6、直接在style标签内只用字体样式

     例子: font-family: "时尚中黑简体";


就这样子,欢迎指正~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 7,957评论 4 45
  • 什么是Vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架,(React除了开发网...
    EEEEsun阅读 3,911评论 0 1
  • 一、使用脚手架工具搭建项目框架 vue init webpack muse (使用vue创建一个muse新项目) ...
    zoepasserby_阅读 5,966评论 0 0
  • # 什么是webpack?* 问题:为什么在 vue 中使用 npm run build 命令就可以把开发环境中的...
    徒步旅行_72c5阅读 1,810评论 0 0
  • 摘要:webpack构建项目的时候各个依赖模块都称之为资产,如图片,样式,脚本等等。本章节主要学习webpack不...
    liquan_醴泉阅读 3,008评论 0 0

友情链接更多精彩内容