WEBPACK INTRODUCTION

Roskilde Teknisk Skole WU10 group: Andreas, Driton, Henriethe & Silje

Webpack & PostCSS Installation

It is required to have the following packages: webpack-cli, sass, sass-loader, css-loader, postcss-loader mini-css-extract-plugin. Use the terminal to install these packages by typing [npm install *insert name*], for every one.

Webpack & PostCSS Konfiguration

You will need a script in package.json with the following command: “webpack”. Another requirement is to have a file with the following code, refer to image 1. This includes css & js bundling and sourcemap creations.

Additionally, it is necessary for you to import your main scss file into your main js file.

PostCSS Installation

This step requires you to download the postcss-loader package using the npm install command.

PostCSS Konfiguration

Creating a browserslistrc file to your project following the guidelines provided by https://browsersl.ist/

Next, you want to add the postcss-loader to your scss loaders under the property “use”.

Transpiling SASS to CSS

Transpiler Installation

With the help of NodeJS we can install the transpiler package with the following command: “npm install sass”.

Transpiler execution

Navigate to package.json and under scripts, create a new script with any name and the value of it will be, “sass –watch input:output”. Input can be a folder or a specified file and the output has to match the input, folder->folder, file->file.