React-styleguardist - стати c активов? - PullRequest
Новая
       25

React-styleguardist - стати c активов?

1 голос
/ 11 января 2020

Я хотел бы использовать ресурс stati c в моей документации, но я получаю 404

Моя папка активов находится на root проекта в src / и называется stati c

Я добавил этот путь в assetsDir в моем styleguide.config. js

const path = require('path')

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

Вот как я пытаюсь ссылаться на него в _icon.s css

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

Я застрял и не вижу, что я делаю неправильно. Спасибо за помощь !!

1 Ответ

2 голосов
/ 11 января 2020

Причина, по которой вы получаете 404 ответов для ваших активов stati c, заключается в том, что папка src/static обслуживается как /, что означает, что пути к вашим изображениям будут /img/.., а не /static/img/....

Из документации :

assetsDir

Тип: String или Array , опционально

Ваша папка ресурсов stati c будет доступна как / на сервере разработки стилей.

Ваша проблема может быть исправлена ​​двумя способами , Какой вариант вы выберете, будет зависеть от того, как организован ваш проект, и, вероятно, от количества кода, к которому нужно прикоснуться, чтобы внести любое изменение.

Вариант 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;
  ...
}
...