如何使用rollup修改字体路径？

Question

我目前正在为我的项目配置汇总。

在处理资产时，（字体：.woff）我遇到问题，在捆绑我的项目时无法正确解析路径。

我的项目目录如下所示。

src -
    |_...other dirs..
    |_styles
       |_fonts
          |_notosans.scss (!! where font import happens!!)
          |_woff
             |_....my font assets..      
         

/// notosans.scss


@font-face {
  font-family: 'NotoSansKR';
  font-weight: 900;
  font-display: swap;
  src: local('NotoSansKR Black'),
    url('./woff/NotoSansKR-Black.woff') format('woff');
}

因此，我按如下方式配置了汇总。

import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss';
import copy from 'rollup-plugin-copy';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import alias from '@rollup/plugin-alias'
import pkg from './package.json';

export default [
  {
    input : "src/index.ts",
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true
      },
      {
        file: pkg.module,
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(['react', 'react-dom', 'styled-components' ,'lottie-web']),
      commonjs({
        include: ['./src/index.ts', 'node_modules/**']
      }),

      typescript({ tsconfig: './tsconfig.json' }),
      alias({
        entries: [
          {
            find : '@assets',
            replacement: './src/assets'
          }
        ]
      }),
      json(),
      copy({
        targets: [
            // Need to copy the files over for usage
            { src: "src/styles/fonts/woff", dest: "dist/assets" },
        ],
      }),
      postcss(),
    ]
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{file : "dist/index.d.ts" , format: "esm"}],
    plugins: [dts()],
    external : [/\.(scss|css)$/]
  }
]

我想要的是 dist 文件夹如下所示

dist
  |_assets - woff - my fonts..
  |_cjs 
  |_esm
  ...

当我构建项目时，捆绑的东西看起来就像我想要的那样。

但是字体（notosans.scss）的导入路径没有更改以适应 dist 目录结构。

下面是我构建的代码片段

var css_248z$1 = "@font-face {\n  font-family: \"NotoSansKR\";\n  font-weight: 900;\n  font-display: swap;\n  src: local(\"NotoSansKR Black\"), 

如您所见，路径没有改变。

当然这是因为我没有为此设置任何东西，但我不知道我应该谷歌搜索什么......

顺便说一句，还有其他解决方案，例如使用 CDN 、链接标签、修改 src 路径以适应构建，但这不是我想要的。

通过解决这个问题，我想我可以获得更好的捆绑技能。

请给我任何建议或解决方案，这会对我有很大帮助。

Answer 1

这帮助我完成这项工作

TLDR；您可以将回调传递给

postcss-url

的 url 参数。当 CSS

url()

遇到

postcss-url

时，将调用此回调，可用于将字体复制到 dist/assets + 更改编译后的 css 中的 url

const FONT_RX = /\.(woff|woff2|ttf)$/;
const OUT_DIR = "./dist";

const config = {
 // ...
  plugins: [
    postcss({
      extract: false,
      modules: true,
      plugins: [
        url({
          // Copy fonts to dist/assets + change the url in css
          url: (asset) => {
            if (!FONT_RX.test(asset.url)) {
              return asset.url;
            }
            const file = fs.readFileSync(asset.absolutePath);
            const fileName = path.basename(asset.absolutePath);
            fs.ensureDirSync(path.join(OUT_DIR, "assets"));
            const filePath = path.join("assets", fileName);
            fs.writeFileSync(path.join(OUT_DIR, filePath), file);
            return filePath;
          },
        })
      ],
    }),
  ],
};