I am using storybook documentation and couldn't load images from assets folder. As documentations says: "if you are using a custom Webpack config, you need to add the file-loader into your custom Webpack config" - and my webpack.config file looks like:
const path = require('path');
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
});
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
},
],
});
config.module.rules.push({
test: /\.(svg|png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
]
},);
config.resolve.extensions.push('.ts', '.tsx')
return config;
};
package.json:
"react": "^16.10.1",
"react-dom": "^16.10.1",
"typescript": "^3.6.3",
"@storybook/react": "^5.2.1",
"@types/storybook__react": "^4.0.2",
"file-loader": "^4.2.0"
This is after yarn storybook
seems like something is missing from storybooks documentation, or I am doing something wrong :? thank you whoever can help me out with this problem. ^_^
You can publish the static Storybook web app to many hosts. We maintain storybook-deployer , a handy tool to help you publish to AWS or GitHub pages.
Storybook is configured via a folder called . storybook , which contains various configuration files. Note that you can change the folder that Storybook uses by setting the -c flag to your start-storybook and build-storybook scripts.
Storybook 6.5 supports React 18 and Angular 14 out of the box. When you run your React project for the first time, it will auto-detect the React version and use the new root API if it detects it on React 18. Check out #17215.
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.
You can also configure a directory (or a list of directories) for searching static content when you are starting Storybook. You can do that with the -s flag.
//package.json
{
"scripts": {
"start-storybook": "start-storybook -s ./public -p 9001"
}
}
Good Luck...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With