🏊🏽‍♂️Dive into Sass/SCSS - A PRACTICAL approach - Part Two

Recap

Part One - https://dev.to/kihuha/sass-for-beginners-a-practical-approach-1m3b

We first learnt about the difference between .sass and .scss, learnt how to define a variable and how to separate your styles into different files for separation of concerns.

Let's continue

3. SASS to CSS

There are two ways of converting your .scss files to CSS.

3. a) Using an application

For those of you who prefer graphical user interfaces, both paid and free applications can be used. You can check out the following free to use applications. They are fairly straightforward to use and sufficient documentation is available in the apps' homepages

FREE APPS

• Koala => http://koala-app.com/
• Scout App => https://scout-app.io/

3. b) Using the command line

To use the command-line tool, you need to ensure that you have at least either of the following tools pre-installed

• Node => https://nodejs.org/en/
• Choco for windows => https://chocolatey.org/
• Brew for Mac OSX => https://brew.sh/

Once you have either of the tools installed globally, you can install sass by running:

• npm install -g sass for Node
• choco install sass for windows
• brew install sass/sass/sass for Mac OS X

Confirm your installation by running:

sass --version

To convert the .scss/.sass files to CSS, run the command listed below specifying the source location and the intended destination for the compiled CSS

sass [source-file-location]/main.scss [destination-location]/index.css

The above command will look for the .main.scss file and transform it into plain CSS then save it in the directory specified as the destination and under the name specified in the command

3. c) Using Webpack - For more advanced users

Webpack is a module bundling tool -> it analyses your project for dependencies within files and bundles them to produce a single file. For more info, read through the documentation at https://webpack.js.org/

Webpack allows you to convert .scss files to .css files and also bundles them together to produce a single .css file. As a developer, you can define this process in the webpack.config.js file by specifying the loaders that will process the file.

A typical webpack.config.js file looks like this

module.exports = {
    entry: 'index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss/,
                loader: [
                    'css-loader',
                    'sass-loader'
                ]
            },
        ],
    }
};

The file above defines three main keys - entry, output and module. Pay close attention to the module object. This is where we define loaders to handle the various type of files we have in our project. The second item in the rules is where we describe a regex to test against the files encountered by webpack.

Whenever it encounters a .scss file, it will use the loaders inside the loader array to transform the file from one form to another starting with the loader in the last index of the array (i.e. the sass-loader for our case).

{
    test: /\.scss/,
    loader: [
        'css-loader',   --> This transforms the result of the sass-loader
        'sass-loader'   --> This transforms the file first
    ]
}

Once the transformation has been done, you may

1. Insert it into the HTML page as a
2. Output the final transformed css file to the project directory

For option 1, include an additional loader (style-loader) to insert the file

{
    test: /\.scss/,
    loader: [
        'style-loader'  --> Inserts css to the HTML <style> tag
        'css-loader',   --> This transforms the result of the sass-loader
        'sass-loader'   --> This transforms the file first
    ]
}

For Option 2, you need to install an additional plugin (mini-css-extract-plugin) to handle the outputting for us. mini-css-extract-plugin also comes with a loader which is added to the loaded array.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
...
...
{
    test: /\.scss/,
    loader: [
        MiniCssExtractPlugin.loader,  --> outputs css file to a directory
        'css-loader',  
        'sass-loader'   
    ],
    plugin: [
        new MiniCssExtractPlugin()  --> Specify the plugin instance here
    ]
}
...
...

For more info on the mini-css-extract-plugin plugin, start here - https://webpack.js.org/plugins/mini-css-extract-plugin/ or go to their github repo on https://github.com/webpack-contrib/mini-css-extract-plugin

RECAP

1. You can use a GUI application to transform .scss files to .css
2. There is a node package called 'sass' that can compile your .scss files for you by specifying the right commands on a terminal
3. Alternatively, webpack can be used to compile and a) insert your css to an HTML file b) output your css as a .css file