css-assets-locale

build-plugin-css-assets-local 提供将 css 中的网络资源本地化能力，例如字体文件等。

Install#

$ npm i --save-dev build-plugin-css-assets-local

Options#

outputPath: 默认值： assets 提取后的文件目录前缀
relativeCssPath: 默认值： ../ 提取的文件后相对于 CSS 的路径

Usage#

{
  "plugins": [
    [
      "build-plugin-css-assets-local",
      {
        "outputPath": "assets",
        "relativeCssPath": "../"
      }
    ]
  ]
}

使用场景#

组件代码里有可能会依赖一些远程 CDN 的字体文件等，某些网络可能访问不了，出现这个问题有几种情况：

构建部署时网络正常，网站运行时网络请求不到 CDN 文件
构建部署和网站运行时都请求不到 CDN 文件
构建部署时网络请求不到 CDN 地址，网站运行时可以请求到

第 3 种情况一般不需要做什么事情就能正常工作，以下是主要针对 1/2 两种场景的方案。

场景 1：网站运行时请求不到 CDN 文件#

通过插件 build-plugin-css-assets-local 在构建时将网络资源下载到源码里。

安装依赖：

$ npm i --save-dev build-plugin-css-assets-local

插件参数:

outputPath: 默认值 assets，提取后的文件目录前缀
relativeCssPath: 默认值 ../，提取的文件后相对于 CSS 的路径
activeInDev：默认值 false，本地调试时是否启用

在 build.json 中引入：

{
  "plugins": [
    [
      "build-plugin-css-assets-local",
      {
        "outputPath": "assets",
        "relativeCssPath": "../"
      }
    ]
  ]
}

场景 2：构建部署和网站运行时都请求不到 CDN 文件#

手动将对应资源下载到源代码中，仅针对 @alifd/next 组件里的字体文件

@alifd/next 组件库默认引用两类字体，包括图标字体和 robot 基础字体，因此分别需要把对应的文件下载到本地目录里：

图标字体文件，下载到 public/ 目录下
robot 字体文件，下载到 public/ 目录

接着在 build.json 里加入以下配置：

{
  "plugins": [
    [
      "build-plugin-fusion",
      {
        "themeConfig": {
          "icon-font-path": "'/icon-font/icon'",
          "font-custom-path": "'/font/'"
        }
      }
    ]
  ]
}