React-styleguardist - 静态资产？

Question

我想在我的文档中使用静态资产，但我收到 404

我的资产文件夹在项目的根目录下的 src/ 下，名为 static

我在 styleguide.config.js

的 assetsDir 中添加了这条路径

const path = require('path')

module.exports = {
  assetsDir: 'src/static',
  require: [
    'babel-polyfill',
    path.join(__dirname, 'src/styles/style.scss')
  ],
};

这就是我在 _icon.scss

中尝试引用它的方式

.ic_file{
  background: url("/static/img/svg/ic_file.svg") no-repeat center / auto;
  width: 20px;
  height: 20px;
  display: inline-block;
}

我卡住了，看不出我做错了什么。谢谢帮忙！！

Answer 1

您的静态资产得到 404 响应的原因是文件夹 src/static 被提供为 /，这意味着您的图像路径将是 /img/..不是 /static/img/....

From the documentation:

assetsDir

Type: String or Array, optional

Your application static assets folder will be accessible as / in the style guide dev server.

您的问题可以通过两种方式解决。您选择哪个选项将取决于您的项目的组织方式以及进行更改所需的代码量。

选项 1：更改配置和结构

创建一个文件夹作为 static 的同级文件夹，并将文件和文件夹移动到其中，包括 static 文件夹。例如：

|-- src
    |-- static
        |-- img

变为：

|-- src
    |-- assets
        |-- static
            |-- img

然后更新 styleguide.config.js 以指向新文件夹，在我的示例中它被命名为 assets 但它可以是任何东西。

module.exports = {
  assetsDir: 'src/assets/'
};

选项 2：更改文件引用

从您的样式 URL 中删除 /static。

.ic_file{
  background: url("/static/img/svg/ic_file.svg") no-repeat center / auto;
  ...
}

变为：

.ic_file{
  background: url("/img/svg/ic_file.svg") no-repeat center / auto;
  ...
}

React-styleguardist - 静态资产？

React-styleguardist - static assets?

react-styleguidist