Storybook's configuration including its Webpack configuration can be found in the
/.storybook directory. You can easily extend this configuration beyond the defaults, which for Emulsify Drupal includes loading twig, sass, YAML and linting styles.
The Webpack build for the project found in the
/webpack directory can be extended as well. By default it includes the following:
SVG Spriting: Any SVG added into the
images/icons directory will be added to the sprite and is delivered via the icon component (see
components/01-atoms/images/icons for details)
Image minification: Any images added into the
images directory will be minified
Sass/Stylelint/Minification: By default, all sass files will be compiled and minified into a single CSS file with stylelint feedback for errors.
There are also some other niceties for feedback (progress plugin) and cleanup (to keep the
dist directory clean). Also, by default there is a separate webpack configuration for development (
webpack/webpack.dev.js) and production (
webpack/webpack.prod.js). The development file is used when running
yarn develop and the production task is meant to be used by the
yarn build-webpack command for deployments.
./babel.config.js (Main config file)
./.browserslistrc (used by Babel env)