Sass to CSS Crash Course

Installation

In practice, you'll be using Sass via webpack or WebStorm.

Via webpack

We assume you already installed webpack. Then:

$ touch webpack.config.js
$ npm install --save-dev node-sass sass-loader style-loader css-loader mini-css-extract-plugin

Add in the webpack.config.js file:

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
    entry: "./src/main.js",
    mode: "development",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: isDevelopment ? '[name].css' : '[name].[hash].css',
            chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
        })
    ],
    module: {
        rules: [
            {
              test: /\.module\.s(a|c)ss$/,
              loader: [
                isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
                {
                  loader: 'css-loader',
                  options: {
                    modules: true,
                    sourceMap: isDevelopment
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: isDevelopment
                  }
                }
              ]
            },
            {
              test: /\.s(a|c)ss$/,
              exclude: /\.module.(s(a|c)ss)$/,
              loader: [
                isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
                'css-loader',
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: isDevelopment
                  }
                }
              ]
            }
        ]
    }
};

The /src/main.js will be:

import './style.scss';

The /src/style.scss will be:

$color-red: red;

.container {
  .red {
    color: $color-red;
  }
}

Then, run webpack:

$ npx webpack

For further information: https://developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/

Repository: https://github.com/augustkohl/exercises/tree/master/webpack/sass-to-css

Via WebStorm

Install it globally and then add the watcher.

$ npm install -g sass
$ sass -v

For more info: https://sass-lang.com/

Multiple entries

Multiple outputs