#5 Step By Step: Sass with Autoprefixer
Friday, August 10, 2018
In this article we will make use of autoprefixer to apply vendor specific tags to our css when needed as well as convert over from using css to using scss. As most people are well aware of the nature of web development requires us to take into account what browser our users might be using. In the area of css this is done by applying vendor prefixes to our styles where needed, which would get very annoying if we had to do it by hand. Luckily we have a tool such as autoprefixer to apply those prefixes for us. In addition to that we can make structuring large projects easier by using a css preprocessor instead of css itself. My choice for preprocessor is scss which we will configure webpack to use.
Vendor Prefixes
- WebUi
- package.json
If you have been doing web development for any amount of time you know that many times we need to include vendor specific properties to our css in order to make our styles work in the various browsers. You could of course add these prefixes yourself but that gets very tiring very quickly. Luckily we have a way to have those prefixes added for us. To do this the first thing we are going to do is install a couple of packages from npm (a). The version numbers for these packages at the time of the writing of this article are shown in (b).
Terminal
npm install --save-dev
autoprefixer
postcss-loader
package.json
{
...
"devDependencies": {
...
"autoprefixer": "^8.4.1",
...
"postcss-loader": "^2.1.4",
...
},
...
}
Quick back to the config
- WebUi
- webpack.config.js
With new packages added we need to update our webpack configuration file (c).
First off we need to add a couple of require statements at the top. Next we need to add our postcss loader to the
use array for our css files. Now you may be asking me 'Why add the postcss loader before the
css loader?'. And to that I say I have no idea I am just following the documentation and it
does not work the other way around. When in doubt I tend to go with what works so that is
what we are going to do here. After that we need to once again configure our plugin. We
perform the configuration by using the built in
LoaderOptionsPlugin
. This is point where we can
tell the postcss loader that we would like to apply autoprefixer to our css.
webpack.config.js
...
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
...
const _module = {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
}
]
}
...
const plugins = [
...,
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer()
]
}
})
];
...
With that done if we give our build a try we will be shown an error (d).
Configuration files as far as the eye can see
- WebUi
- Source
- index.bundle.css
- postcss.config.js
- Source
Let us do what the error suggests that we do and add a new configuration file to the root of our project. A quick look at the postcss documentation shows us what the file should look like and is shown in (e).
postcss.config.js
module.exports = {
plugins: {
"autoprefixer": {}
}
}
With all of that done we need to test and see if everything is working. To do this we just return
to our index.css
file and replace the contents shown in
(f).
index.css
.autoprefixer-test {
user-select: none;
}
Now if we run our build we should see our css bundle looks like (g).
index.bundle.css
.autoprefixer-test {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Why use one thing when we can use another
- WebUi
- package.json
Very rarely do I write css so now we are going to modify things so that everything works when our styles are written using scss. The first step is to once again add a couple of npm packages to our project (h). As usual the version numbers at the time of the writing of this article are shown in (i).
Terminal
npm install --save-dev
node-sass
sass-loader
package.json
{
...
"devDependencies": {
...
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
...
},
...
}
- WebUi
- webpack.config.js
Now there are a few things that we need to modify in our webpack configuration file.
We will start by changing the extension on our .css
file to .sass
. Next we will change the test for our
rule from /\.css$/
to
/\.scss$/
and adding the sass loader
to the end of our use array (j).
webpack.config.js
...
const entry = {
"index": [..., "./Source/index.scss"]
}
const _module = {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
}
]
}
...
- WebUi
- Source
- index.css
- index.scss
- Source
Next thing to do is to change the extension on our style file and modify its contents (k). Here we will create a mixin which when invoked will recreate the contents that we had previously. In order to make sure that the build is working and making use of our sass file we will also make use of a color variable.
index.scss
$color: blue;
@mixin autoprefixer-test {
user-select: none;
}
.autoprefixer-test {
@include autoprefixer-test;
color: $color;
}
From time to time when I invoke a build containing sass I will receive the error shown in (l). If you do not receive this error then nothing to worry about. If you do I find that reinstalling node-sass from npm clears things up.
Once everything is working as it should be we should see our css bundle now contains the contents shown in (m).
index.bundle.css
.autoprefixer-test {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: blue; }