For the purposes of this tutorial, I am going to use SCSS, however there are sass, less and other preprocessors available to use in a Broccoli build. Check NPM.
For this, we will use the excellent broccoli-sass-source-maps plugin.
yarn add --dev broccoli-sass-source-maps@^4.0.0 sass@^1.14.0
And update your Brocfile.js
As you can see, we're now using the
compileSass plugin to transform our
scss file into a
css file, and
emit it into the
/assets directory. The last parameter is an options hash that we will cover in a moment.
build & serve and you should see the newly compiled
scss file has generated a
css file with the
addition of the green border on the
html element. Pretty neat. You can now use this
file as your entrypoint for scss/sass compilation.
As the name of the plugin suggests, it supports source maps. Source maps are a great way during development
to be able see where styles have come from in the source
scss document, rather than the compiled
Try inspecting the html tag right now, you should see the
html style is defined in
app.css on line 1, however
it's actually defined in the
app.scss on line 2. This is a fairly trivial example but gets way complicated
when you have imported files and lots of scss processing being done.
To enable source maps, add the following to the options hash that's the last parameter to
yarn serve and you should see that when inspecting the html tag, the line has changed to line 2 and the
file is now
app.scss. If you click the file name in the inspector, it should take you to the source
file, showing the original scss, complete with variables.
See the Github repo for more details on further configuration options.
Completed Branch: 04-sass-preprocessing