Advertisement

#5 Step By Step: Sass with Autoprefixer

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.

Parts

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
(a) The npm packages that we need to automatically add vendor prefixes to our css.

package.json

{
    ...
    "devDependencies": {
        ...
        "autoprefixer": "^8.4.1",
        ...
        "postcss-loader": "^2.1.4",
        ...
    },
    ...
}
(b) The version numbers for the packages at the time of the writing of this article.

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()
            ]
        }
    })
];
...
(c) Updating our configuration file to make use of autoprefixer via the postcss loader.

With that done if we give our build a try we will be shown an error (d).

Error message telling us that in order to use the postcss loader we need to specify a configuration file.
(d) Error message telling us that in order to use the postcss loader we need to specify a configuration file.

Configuration files as far as the eye can see

  • WebUi
    • Source
      • index.bundle.css
    • postcss.config.js

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": {}
    }
}
(e) Basic postcss config that will apply autoprefixer to our css.

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).

Advertisement

index.css

.autoprefixer-test {
    user-select: none;
}
(f) To test our setup we need to choose a css property that has corresponding vendor prefixs.

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;
}
(g) With everything setup our css bundle now automatically applies vendor prefixes for us.

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
(h) The two npm packages that we need in order to process sass files.

package.json

{
    ...
    "devDependencies": {
        ...
        "node-sass": "^4.9.0",
        "sass-loader": "^7.0.1",
        ...
    },
    ...
}
(i) The version numbers of the packages at the time of the writing of this article.
  • 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"
            ]
        }
    ]
}
...
(j) Modifying our configuration to handle scss files instead of css.
  • WebUi
    • Source
      • index.css
      • index.scss

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;
}
(k) Modifying the contents of our style file to see if our sass setup is working as intended.

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.

Error telling us that we need node-sass even though it is already installed.
(l) Error telling us that we need node-sass even though it is already installed.

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; }
(m) The contents of our style bundle shows that our sass setup is in fact working as it should be.
Exciton Interactive LLC
Advertisement