React-styleguardist - static assets?

Question

I would like to use static asset in my documentation but I'm getting 404

My asset folder is on the root of the project under src/ and called static

I have added this path in assetsDir in my styleguide.config.js

const path = require('path')

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

This is how I'm trying to reference it in _icon.scss

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

I am stuck in and can't see what I'm doing wrong. Thanks for helping!!

Answer 1

The reason you are getting 404 responses for your static assets is because the folder src/static is served up as / meaning that your image paths will be /img/.. not /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.

Your problem can be fixed in two ways. Which option you choose will depend on the how your project is organised and probably the amount of code you need to touch to make either change.

Option 1: Change config and structure

Create a folder as a sibling to static and move the files and folders into that, including the static folder. For example:

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

becomes:

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

Then update styleguide.config.js to point to the new folder, in my example it is named assets but it could be anything.

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

Option 2: Change file references

Remove /static from your style URLs.

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

becomes:

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