storybook - 如何在汇总包中最好地包含 scss 文件中引用的 Assets (图像和字体)

Question

我正在用 typescript、sass 和 rollup 编写一个 react 组件库，我希望它尽可能独立。
有没有人建议如何最好地包含 scss 文件中引用的 Assets (图像和字体)？
一种解决方案可能是某种加载器(例如 postcss 处理器)将 scss 文件中引用的所有图像和字体资源替换为 base64 版本。
有没有人有一个有效的例子？任何解决方案或建议将不胜感激🙏🏻
我的汇总配置如下所示:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import scss from 'rollup-plugin-scss'
import sass from "rollup-plugin-sass";
import commonjs from "rollup-plugin-commonjs";
import copy from "rollup-plugin-copy";
import url from '@rollup/plugin-url';

import packageJson from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true
    }),
    typescript({ objectHashIgnoreUnknownHack: true }),
    commonjs({
      include: ["node_modules/**"],
      exclude: ["**/*.stories.js"],
      namedExports: {
        "node_modules/react/react.js": [
          "Children",
          "Component",
          "PropTypes",
          "createElement"
        ],
        "node_modules/react-dom/index.js": ["render"]
      }
    }),
    scss({
    }),
    sass({
      insert: true
    }),
    copy({
      targets: [
        {
          src: "src/variables.scss",
          dest: "build",
          rename: "variables.scss"
        },
        {
          src: "src/typography.scss",
          dest: "build",
          rename: "typography.scss"
        },
        {
          src: "src/assets",
          dest: "build/",
        },
      ]
    })
  ]
};

更新:
所以我所做的可能是hacky，但它解决了我的问题。
我在 rollup.config.js 的 plugins 数组中添加了一个 postcss-plugin， 之后 一个commonjs插件。

postcss({
      inject: true,
      plugins: [
        postcssInlineBase64({
          baseDir: 'src/assets/',
        }),
        postcssUrl({
          url: 'inline',
        }),
        atImport({
          path: path.resolve(__dirname, '../'),
        }),
      ],
    }),

我还使用了故事书，它在内部使用了 webpack，所以我不得不在 .storybook/webpack.config.js 中重新创建它:

config.module.rules.push({
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          inject: true,
          ident: 'postcss',
          plugins: [
            postcssInlineBase64({
              baseDir: 'src/assets/',
            }),
            postCssUrl({ url: 'inline' }),
            atImport({
              path: path.resolve(__dirname, '../'),
            }),
          ],
        },
      },
      'sass-loader',
    ],
    include: path.resolve(__dirname, '../'),
  });

现在，当在 scss(或可能在其他地方)中使用 url 指令时，我可以使用以下命令包围任何路径: b64---<SOME_PATH>---例如:

@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url('b64---./fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff2---') format('woff2'),
    url('b64---./fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff---') format('woff');
}

这使得 post css 将 Assets 捆绑为 base64。
对于任何可能遇到此帖子的人。祝你好运!希望这可以帮助!

Answer 1

使用 postcss-url Assets 功能使其工作，使用真实图像文件而不是 base64。
这个想法是这个包将 CSS 提取到一个单独的文件中，所有引用的 Assets 都在 url() 中。被拦截，散列并放入文件夹( _assets )，然后 postcss-url 将原始 url 更改为该文件夹。
消费者应用程序(例如带有 css-loader 之类的工具的 webpack)导入 CSS

import 'pkg-name/dist/index.css'

所有 url() s 看起来像 background-image: url(_assets/<hash>.png)并且该加载程序还负责将这些 Assets 放入捆绑包中，并替换 url()到具有公共(public)路径的本地 url，例如 url(/static/<app-hash>.png) .
它不使用内置的汇总 emitFile由于无法从该回调访问插件实例，尽管这将是理想的。

import fs from "fs-extra";
import path from "path";
import hasha from "hasha";

const IMAGES_RX = /\.(png|jpe?g|gif|webp|svg)$/;

// rollup config

plugins: [
  postcss({
    extract: true,
    plugins: [
      // extracts all url() assets into _assets folder, and replaces the url() to a relative path
      // consumers of this package (e.g. webpack apps) will import the css and handle getting assets as well
      postcssUrl({
        url: (asset: any) => {
          if (!IMAGES_RX.test(asset.url)) return asset.url;

          const file = fs.readFileSync(asset.absolutePath);
          const hash = hasha(file, { algorithm: "md5" });

          const extname = path.extname(asset.absolutePath);

          const hashedFileName = `${hash}${extname}`;
          fs.ensureDirSync(path.join(OUT_DIR, "_assets"));
          const hashedFilePath = path.join("_assets", hashedFileName);

          fs.writeFileSync(path.join(OUT_DIR, hashedFilePath), file);

          return hashedFilePath;
        },
      }),
    ],
  }),
]