Compile SCSS with Gitlab CI/CD

This article is also published in french on my personal blog: https://lelibreauquotidien.fr/2021/01/12/compiler-du-scss-avec-gitlab-ci-cd/

Hello World !

I use a css preprocessor to make my work easier and especially to gain in code readability, but the problem is that it's quite boring to compile the css and put it in a release (time I could spend doing something productive (or not)).

I host my code on the gitlab instance of framasoft (framagit), the advantage of gitlab is that it comes with a system that allows continuous integration.

The goal is to build, test and release software faster.
Source : Wikipedia

So let's see how to use this in practice.

To do continuous delivery with gitlab, you just have to create a file named .gitlab-ci.yml and fill in the necessary information.

I will not waste time, I will give you the code now:

stages:
- compile
compile:
stage: compile
image: node:14.15.1-alpine3.10
script:
- yarn global add node-sass
- mkdir css/
- node-sass --output-style compressed ./file.scss > css/file.min.css
- node-sass ./file.scss css/file.css
artifacts:
paths:
- ./css

I imagine that if you are not initiated, this code does not tell you anything, so I will explain it to you:

• Line 1 and 2: Tells gitlab that there will be a compilation step.
• Line 4 and 5: Tells gitlab that the "compile" step is starting
• Line 6 : We indicate that the docker image to use (yes, gitlab cd works with docker) is an image of alpine (a light linux distribution) with nodeJS preinstalled
• Line 7 : Start the script
• Line 8 : Install sass with yarn
• Line 9 : We create a folder to distribute the compiled files.
• Line 10 and 11: We compile the file .scss (or .sass) in compressed and uncompressed version
• Line 12,13 and 14 : We indicate to gitlab that the compiled files are in the folder css/

You can save the file, the "pipeline" that could be translated as a compilation of our file will start.

This pipeline will be launched after each commit and you can check the status of your pipelines in the CI/CD > Pipelines menu.

Finally, to download the 2 files, you can use this menu and click on "compile":

This is the end of this article, thanks for reading it and don't hesitate to give me feedback in the comments ;).

Cover image by James Osborne on Pixabay