如何在Nuxt项目中正确引入并配置@carbon/type字体库

1. 安装依赖 #

首先确保已经安装@carbon/type包，执行命令：

npm install @carbon/type
# 或yarn安装
yarn add @carbon/type

如果需要自定义字体配置、使用本地托管字体，需要额外安装sass相关依赖（Nuxt2推荐安装适配版本）：

npm install sass sass-loader@10 -D

2. 两种接入方案选择 #

方案A：快速接入（使用IBM公共CDN字体，无需额外配置） #

直接在现有carbon.js插件中新增@carbon/type样式导入即可，修改后的代码如下：

import Vue from "vue";
import "carbon-components/css/carbon-components.css";
// 新增：引入@carbon/type预编译样式
import "@carbon/type/css/type.css";
import CarbonComponentsVue from "@carbon/vue";
Vue.use(CarbonComponentsVue);

注意：该方案字体资源从IBM公共CDN加载，境内访问可能存在加载慢的问题，建议使用方案B本地托管。

方案B：本地托管字体（稳定无网络限制） #

• 复制字体资源：将node_modules/@carbon/type/fonts目录下的所有字体文件，复制到项目根目录的static/fonts文件夹下（没有就新建对应目录）。
• 新建全局样式文件：在assets/scss目录下新建carbon.scss，内容如下：

// 配置本地字体路径
$carbon--font-path: '/fonts';
// 引入@carbon/type核心样式
@import '@carbon/type/scss/type';
// 全局启用Carbon字体重置，覆盖默认页面字体
@include carbon--type-reset();

• 修改nuxt.config.js配置，新增css项引入自定义样式，同时可以把公共样式从插件中移到全局配置，避免服务端渲染时样式闪烁：

// 新增css配置项
css: [
  '~/assets/scss/carbon.scss',
  'carbon-components/css/carbon-components.css'
],
plugins: [
    { src: '~plugins/pubnub.js', mode: 'client' },
    { src: '~plugins/axios.js', mode: 'client' },
    { src: '~plugins/auth.js', mode: 'client' },
    { src: '~plugins/vue-instantsearch.js' },
    { src: '~plugins/carbon.js', mode:'client' }
],

• 调整carbon.js，删除重复的css导入：

import Vue from "vue";
import CarbonComponentsVue from "@carbon/vue";
Vue.use(CarbonComponentsVue);

3. 验证配置 #

重启Nuxt开发服务，检查元素样式，所有Carbon组件的字体应该已经正确加载为IBM Plex系列字体。

内容的提问来源于stack exchange，提问作者Leonardo Wildt