Lint, compile, prefix and minify¹ SCSS using one command!
Please read the article at https://klooven.link/powertools.
npm install scss-powertools --save-dev
npx scss-powertools <input> <output> [options]
scss-powertools is made really simple to use, and only consists of one command:
scss-powertools <input> <output> [options]
input
(SCSS) and output
(CSS) are references to your input SCSS and output CSS, relative to your project root (or where the command is run). If you have your SCSS in scss/app.scss
and want to output to dist/styles.css
, your command will look like:
scss-powertools scss/app.scss dist/styles.css
Currently there are two options. These should not be combined.
-p or --production => Minify the output CSS,
disable source maps and error (non-zero exit code)
if any issues, like linting issues occur (use on your CI)
-m or --minify => Minify the output CSS, even though you are on dev environment
Did you write your imports like this earlier?
@import "node_modules/bootstrap";
No need to, anymore. Just write:
@import "bootstrap";
Simple!
Running scss-powertools
in your CI is easy. Just make sure to include the --production
flag. It will make sure that your CI build will error if anything bad happens (like a lint issue).
scss-powertools
does not need any config. Everything from linting to minifying is preconfigured using recommended settings. You can check powertools.js
to learn more about how the tool works.
¹Only when enabled