This repo is limited to the dependencies and configuration to build CSS/JS files for a Drupal theme, with a Storybook interface for component development. A Drupal theme will need to be generated first (https://www.drupal.org/docs/core-modules-and-themes/core-themes/starterkit-theme). Then copy the files from this repo into that folder.
npm run buildcompiles and optimizes the outputnpm startwatches files for changes in any linked files (import from...orbackground-image:...), and compiles the results todist/. Also starts a browsersync instance with a proxy to a lando servernpm run storybooklaunches the storybook ui in a browser.
componentsare expected to follow the conventions from https://github.com/bryanbuchs/generator-component (yo generate component)- Vite will look for
components/**/*.library.jsfiles and the results of each will be compiled to thedistdirectory, and will be registered as libraries for the corresponding SDC. - The mixin and settings files in the root
lessdirectory are automatically loaded when processing LESS. - Images smaller than 10kb referenced in CSS/LESS will be inlined as data-url in the compiled CSS.
- SVGs can be inlined the same way, or by using postcss-inline-svg if fill/stroke colors need to be adjusted per-rule.
postcss-inline-svgwill look for SVGs at these paths, in order:- same directory as the component
- the shared
/imagesfolder - installed in
node_modules - A FontAwesome icon, using the pattern
[solid|regular|brands]/[icon].svg