npm install react-styleguidist@5.0.0-beta-8`
This release incorporates a lot of rethinking and rewriting. But most of the changes was done to make initial configuration easier.
- New Webpack configuration options + user config auto load.
- create-react-app support out of the box.
By default React Styleguidist will try to find Webpack config (webpack.config.dev.js
or webpack.config.js
) anywhere in your project and use it.
There’s the new webpackConfigFile option to specify a custom path:
module.exports = {
webpackConfigFile: './configs/webpack.js',
};
Note::
entry
,externals
andoutput
options will be ignored, usewebpackConfig
option to change them.
Note:: it may not work with your project, see below for other options.
Now Styleguidst works with create-react-app even without config.
It will load components from src/components/**/*.js
. And example file sfrom Component/Readme.md
or Component/Component.md
.
With the new webpackConfig:
module.exports = {
webpackConfig: {
module: {
loaders: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
// Other loaders that is needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules',
},
],
},
},
};
You can also use loaders module if your project doesn’t use Webpack:
npm install --save-dev loaders
const loaders = require('loaders');
module.exports = {
webpackConfig: {
module: {
// Enable all loaders
loaders: loaders.all,
// OR only needed loaders
loaders: [
loaders.babel,
loaders.css,
loaders.json,
loaders.url,
// Other loaders for your style guide
],
},
},
};
include
/exclude
options in you Webpack loaders are no longer required.- JSON loader will be added automatically if needed.
Note: this option disables Webpack config auto load, use
webpackConfigFile
option to load your project’s Webpack config from file.
Lodash will not be available in examples as _
. You can load function you need with the new context option:
module.exports = {
context: {
forEach: 'lodash/forEach',
map: 'lodash/map',
},
};
Or replicate previous behavior though it’s not recommended:
module.exports = {
context: {
_: 'lodash',
},
};
Use config option theme to change fonts, colors, etc. and option styles to tweak style of particular Styleguidist’s components:
module.exports = {
theme: {
link: 'firebrick',
linkHover: 'salmon',
font: '"Comic Sans MS", "Comic Sans", cursive',
},
styles: {
Logo: {
logo: {
animation: 'blink ease-in-out 300ms infinite',
},
'@keyframes blink': {
to: { opacity: 0 },
},
},
},
};
We now use JSS under the hoood.
components
:src/components/**/*.js
getExampleFilename
:Component/Readme.md
orComponent/Component.md
title
:<app name from package.json> Style Guide
Fixes #260.
File an issue if you have a use case that isn’t covered by new options.
- Path for
template
config option should be relative to style guide config (#211) - Do not show isolated links on Markdown examples (#251)
- Escape and highlight code in Markdown in descriptions (#284)
- Show Webpack build errors and warnings
- Exit with error code when build fails
- Show error when no components found on style guide start
will it work with
webpack.config.babel.js
?