Adding CSS

14 Nov 2018

10 minutes

We use parcelify as this allows a CSS dependency chain (as you no it from browserify).

1. Add your CSS files to the `style` field

package.json

 "style" : "css/*.css"

 "style" : "*.scss"

The registry now only picks the style dependencies - it doesn’t merge it with your css files in the sniper section. So be sure that you add all css files - the “style” attribute can also be an array.

× You need to install npm before you can start to rock. See the getting started guide for more info.

2. Adding a build tasks and updating the sniper

2.1) Install parcelify

npm install parcelify --save-dev

2.2) Adding it as a build task

package.json

"scripts": {
...
 "css": "parcelify ./ -c build/bundle.css",
...
}

2.3) Update the sniper

css: ["/build/bundle.css"]

2.4) Optional: Parcelify has a watch mode

parcelify ./ -w -c build/bundle.css

3. Using a preprocessor (SASS, LESS, …)

For CSS preprocessors like SASS or LESS you can use a parcelify tranform, see this example for SASS:

  "transforms" : [ "sass-css-stream" ],
  "dependencies" : {
    "sass-css-stream": "~0.0.1"
  }

Do you want to learn more about parcelify transforms?

1. Add your CSS files to the style field

2. Adding a build tasks and updating the sniper

3. Using a preprocessor (SASS, LESS, …)

1. Add your CSS files to the `style` field