1

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

我的资产文件夹位于项目的根目录下 src/ 并称为静态

我在我的 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;
}

我被困在里面，看不到我做错了什么。谢谢帮忙！！

4

1 回答 1

2

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

从文档中：

资产目录

类型：字符串或数组，可选

您的应用程序静态资产文件夹将可以/在样式指南开发服务器中访问。

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

选项 1：更改配置和结构

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

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

变成：

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

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

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

选项 2：更改文件引用

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

.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;
  ...
}
于 2020-01-11T11:52:48.357 回答