[Bug]: 使用postcss-url插件内联资源时启动storybook时出错

xuo3flqw 于 6个月前发布在其他

关注(0)|答案(1)|浏览(42)

描述bug

在使用 PostCSS 插件( postcss-url )将基于base64编码的资源内联到 url() 时，在 storybook 启动过程中出现错误：

Unhandled promise rejection: TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '/home/projects/github-txbnpe-gdeiug/\x00/sb-common-assets/nunito-sans-regular.woff2'

感觉这个问题是在进行 #27110 时引入的。

复现链接

https://stackblitz.com/edit/github-txbnpe-gdeiug?file=postcss.config.js

复现步骤

在 postcss.config.js 中添加 PostCSS 配置：

import url from 'postcss-url';

/** @type {import('postcss-load-config').Config} */
const config = {
  extract: false,
  inject: true,
  plugins: [
    url({
      url: 'inline',
    }),
  ],
  sourceMap: true,
};

export default config;

运行 storybook dev -p 6006

系统信息

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-interactions: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-links: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-onboarding: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/blocks: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/react: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/react-vite: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/test: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    storybook: ^8.3.0-alpha.1 => 8.3.0-alpha.1

其他上下文

无响应*

storybook

来源：https://github.com/storybookjs/storybook/issues/28635

1条答案

按热度按时间

edqdpe6u1#

免责声明
由于此信息是自动生成的，可能存在不准确的情况。
要解决 postcss-url 插件内联资源的问题，请按照以下步骤操作：

更新 base-webpack.config.ts:
定位位于 /code/builders/builder-webpack5/src/preview/base-webpack.config.ts 的文件。
确保 hasPostcssAddon 检查正确识别了 PostCSS 插件：

const hasPostcssAddon = options.presetsList?.some((preset) =>
  /@storybook(\/|\\)addon-postcss/.test(typeof preset === 'string' ? preset : preset.name)
);

添加一条规则来处理内联资源：

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  type: 'asset/inline',
}

修改 addon-postcss.ts:
定位位于 /code/lib/cli/src/automigrate/fixes/addon-postcss.ts 的文件。
确保插件被正确识别，如果需要，会提示进行迁移。
测试配置:
确保位于 /code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts 的测试能正确验证 @storybook/addon-postcss 的存在。

这些更改应该解决了使用 postcss-url 插件内联资源的问题。

参考资料

/code/lib/cli/src/automigrate/fixes/addon-postcss.ts
/code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts
/code/builders/builder-webpack5/src/preview/base-webpack.config.ts
/code/lib/core-webpack/package.json
/code/lib/source-loader/README.md

关于 Greptile

此响应为您提供了一个研究起点，而非精确解决方案。
帮助我们改进！如果您觉得有用，请留下一个 👍，如果无关紧要，请留下一个 👎。

赞(0）回复(0）举报 6个月前

我来回答