Emulsify Design System uses Webpack and Babel across all projects. See below for instructions on adding/editing specific Webpack and/or Babel configuration:
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.
The project leverages Babel for the transpiling and minifying of JavaScript files for the Drupal project. The options for this are controlled by the following files:
Babel config: ./babel.config.js
(Main config file)
Browser Support: ./.browserslistrc
(used by Babel env)