Concatenation

The next step is to add a script to concatenate our existing CSS files.

As mentioned previously, I’ve created the additional.css file for our merge. Inside of additional.css, there are a few additional styles.

Go ahead and also create a new CSS file in your CSS folder. Just give it some additional styles — it doesn’t matter what.

We’ll be adding the following line of code to the end of our script:

"concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css"

Our package.json will now be as follows:

"scripts": {
  "watch-sass": "node-sass sass/main.scss css/style.css --watch",
  "compile-sass": "node-sass sass/main.scss css/style.comp.css",
  "concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css"
},

Let’s break down the line of code we just added:

concat-css: is our script name.

concat -o css/style.concat.css is our package output file.

css/additional.css css/style.comp.css are our CSS files to be concatenated.

In order for this to run, we’ll need to install the concat npm package, run the following command:

npm install concat --save-dev

Once the install completes, you’ll see it listed under the devDependencies of your package.json.

Now, let’s run the concat to make sure it works:

npm run concat-css

You’ll now see the style.concat.css output file in your CSS directory!

Open it up and take a look at your CSS, you’ll see that the contents of your additional.css and your style.comp.css have merged into one!

Next up, we’ll take a look at how to automatically prefix our code.