Sass with sass-loader

With a Subscription, click any sentence in the script to jump to that part of the video!

I just read this awesome article about how cool Sass is. So now, I'm bored with my old, main.css file. Oof. Ancient! Rename this to main.scss. Trendy! Exciting!

Now that this is a Sass file - oooOOOooo - I'll re-work some syntax. Instead of having this extra :hover and :focus section, we can leverage Sass syntax and say &:hover, &:focus, followed by the CSS:

            
            77 lines
            
            assets/css/main.scss
        
                                                    ... lines 1 - 14
                            
            /*LOGIN*/
        
            .btn-login {
        
                                                    ... lines 18 - 26
                            
                &:hover,&:focus {
        
                    color: #fff;
        
                    background-color: #53A3CD;
        
                    border-color: #53A3CD;
        
                }
        
            }
        
                                                    ... lines 33 - 77

That should, ultimately, dump the same CSS. But now, we have the power of Sass!

Since we renamed the file, in layout.js, we need to change the require to be main.scss:

            
            15 lines
            
            assets/js/layout.js
        
                                                    ... lines 1 - 9
                            
            require('../css/main.scss');
        
                                                    ... lines 11 - 15

Now, what do you think will happen when Webpack sees this import? You can probably guess: it's not going to like it.

Find your webpack terminal. Oh boy... oof, I was right. We have a very familiar error:

Module parse failed. Unexpected token. You may need an appropriate loader to handle this file.

We do have a loader for files ending in .css... but not .scss. Fixing this? Oh, it's so nice.

Adding sass-loader

Google for sass-loader. Let's get this guy installed. This package needs itself - sass-loader - but also another package called node-sass. Copy both of those. Then, in your terminal, run:

yarn add sass-loader@^6.0 node-sass --dev

Next, in webpack.config.js, we just need to setup our .scss loader. Copy the CSS loader and paste it. Then... this is cool... just add sass-loader as a third loader. Oh, and don't forget to update test for .scss files:

            
            79 lines
            
            webpack.config.js
        
                                                    ... lines 1 - 4
                            
            module.exports = {
        
                                                    ... lines 6 - 15
                            
                module: {
        
                    rules: [
        
                                                    ... lines 18 - 27
                            
                        {
        
                            test: /\.css$/,
        
                                                    ... lines 30 - 33
                            
                        },
        
                        {
        
                            test: /\.scss$/,
        
                            use: [
        
                                'style-loader',
        
                                'css-loader',
        
                                'sass-loader',
        
                            ]
        
                        },
        
                                                    ... lines 43 - 64
                            
                    ]
        
                },
        
                                                    ... lines 67 - 77
                            
            };

I love this: sass-loader will be called first, which will convert the SASS into CSS. Then, css-loader will convert that to a JavaScript object. Finally, style-loader will add the CSS to the page. That's team work people!

Switch over to your Webpack tab, hit Control+C and restart webpack:

./node_modules/.bin/webpack --watch

No errors! Try the site. It looks great.

Guys! In just a few lines of code, we've unlocked the power of Sass. Use it wherever you want. Like Less instead? It's just as easy to setup.

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.3.*", // v3.3.16
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.0
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.5
        "symfony/swiftmailer-bundle": "^2.3", // v2.6.3
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.4.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.26
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "^2.0", // v2.1.2
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.2
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.6
        "symfony/phpunit-bridge": "^3.0" // v3.3.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "dependencies": [],
    "devDependencies": {
        "babel-core": "^6.25.0", // 6.25.0
        "babel-loader": "^7.1.1", // 7.1.1
        "babel-plugin-syntax-dynamic-import": "^6.18.0", // 6.18.0
        "babel-preset-env": "^1.6.0", // 1.6.0
        "bootstrap-sass": "^3.3.7", // 3.3.7
        "clean-webpack-plugin": "^0.1.16", // 0.1.16
        "copy-webpack-plugin": "^4.0.1", // 4.0.1
        "core-js": "^2.4.1", // 2.4.1
        "css-loader": "^0.28.4", // 0.28.4
        "extract-text-webpack-plugin": "^3.0.0", // 3.0.0
        "file-loader": "^0.11.2", // 0.11.2
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.2.1", // 3.2.1
        "lodash": "^4.17.4", // 4.17.4
        "node-sass": "^4.5.3", // 4.5.3
        "resolve-url-loader": "^2.1.0", // 2.1.0
        "sass-loader": "^6.0.6", // 6.0.6
        "style-loader": "^0.18.2", // 0.18.2
        "sweetalert2": "^6.6.6", // 6.6.6
        "webpack": "^3.4.1", // 3.4.1
        "webpack-chunk-hash": "^0.4.0", // 0.4.0
        "webpack-dev-server": "^2.6.1", // 2.6.1
        "webpack-manifest-plugin": "^1.2.1" // 1.2.1
    }
}

Edit on GitHub

TRACK

JavaScript Fundamentals >

COURSE

JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness

Sass with sass-loader

Keep on Learning!

Adding sass-loader

Leave a comment!

What PHP libraries does this tutorial use?

What JavaScript libraries does this tutorial use?

	... lines 1 - 14
	/LOGIN/

	.btn-login {
	... lines 18 - 26
	&:hover,&:focus {
	color: #fff;
	background-color: #53A3CD;
	border-color: #53A3CD;
	}
	}
	... lines 33 - 77

	... lines 1 - 9
	require('../css/main.scss');
	... lines 11 - 15

	... lines 1 - 4
	module.exports = {
	... lines 6 - 15
	module: {
	rules: [
	... lines 18 - 27
	{
	test: /\.css$/,
	... lines 30 - 33
	},
	{
	test: /\.scss$/,
	use: [
	'style-loader',
	'css-loader',
	'sass-loader',
	]
	},
	... lines 43 - 64
	]
	},
	... lines 67 - 77
	};