- Assuming you already have npm, install Yarn:
npm install --global yarn
- Add
package.json
to the root of your Pattern Lab. Change the name and version if you'd like. - Install dependencies with
yarn install
- Set up your CSS folder structure to match the
sass-watch
script, or edit the script to match your structure.
source
-- css
-- scss
-- _reset.scss
-- _base.scss
-- _other-styles.scss
-- style.scss
-- pattern-scaffolding.css
-- style.css
Use @import
to include all your scss files in style.scss
.
The sass-watch
script will compile everything into a single style.css
file (and corresponding map).
If you decide to call style.css
something different, you'll also need to change the link in source/_meta/_00-head.twig
.
In a separate terminal window, run yarn sass-watch
.
This should compile a new style.css
every time you make any changes to your scss
files.
You'll simultaneously be running php core/console --server
and php core/console --watch
to update your Pattern Lab in the browser.