Add scss and parallel task support to PatternLab2 edition-php-twig-standard using Yarn.

0_Yarn_PHP_Pattern_Lab.md

Setup

1. Assuming you already have npm, install Yarn: npm install --global yarn
2. Add package.json to the root of your Pattern Lab. Change the name and version if you'd like.
3. Install dependencies with yarn install
4. Set up your CSS folder structure to match the sass-watch script, or edit the script to match your structure.

Folder 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.

To use

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.

package.json

{
  "name": "safs-patternlab-php-twig",
  "version": "1.0.0",
  "scripts":{
    "dev:sass-watch": "node-sass source/css/scss/style.scss --watch --output=source/css/ --output-style=compressed --source-map=true",
    "dev:server": "php core/console --server",
    "dev:watch": "php core/console --watch",
    "dev": "run-p dev:*",
    "deploy:sass": "node-sass source/css/scss/style.scss --output=source/css/ --output-style=compressed --source-map=true",
    "deploy:generate": "php core/console --generate",
    "deploy": "run-s deploy:sass deploy:generate"
  },
  "devDependencies": {
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.0.2"
  }
}