DEV Community: Deepanjan Ghosh

Setting up CSS and Sass with Webpack!!

Deepanjan Ghosh — Thu, 29 Apr 2021 03:07:57 +0000

One of the most fundamental parts of frontend development is styling, in this post, we will see how to use styles with webpack. This post is a continuation of my earlier post where I have explained How to set up react project with webpack and babel. So if you have never set up a react project with webpack then I'll suggest you read my previous post and then come back to this post or happen to have a react project already set up and wonder how to work with styles then you are in the right place.

In this post, we will see how to set up both CSS and a CSS pre-processor like Sass with webpack one by one.

As we know webpack is a module bundler and it is responsible for analyzing the files and bundles all your need to run the application in a single JavaScript output file which we commonly call bundle.js. Webpack by default only understands javascript and in order to make webpack understand other resources like .css, .scss, etc we need the help of loaders to compile it. Let see how to do it.

Setting up CSS with webpack

At first, let's install some dev dependencies.



npm i --save-dev css-loader style-loader

The definition says css-loader interprets @import and url() like import/require() and will resolve them. What do we mean by this? css-loader will take all the CSS from the CSS file and generate it to a single string and will pass this to style-loader.
style-loader will take this string and will embed it in the style tag in index.html.

Now let's add the configuration in webpack.config.js. Add this line inside rules in the module.



...
   module: {
        rules: [
            {
                test: /\.(css)$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
...

Here the test property will tell the webpack to use style-loader and css-loader for all the .css files.

(Note: The order in which webpack apply loaders is from last to first, so as said earlier the css-loader will generate the output string which will be used by the style-loader.)

The overall content of webpack.config.js will be:



const path = require('path');

module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "eval-source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(css)$/,
             use: ['style-loader','css-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: path.resolve(__dirname, './public'),
        hot: true
    },
};

Next, we will add an app.css file with the following content.



.container {
    height: 100vh;
    background-color: #E7E3EB;
}

.header {
    padding: 15px 20px;
    background-color: #6200EE;
}

h1 {
    color: #FFF;
}

App.jsx



import React from 'react';
import './app.css';

const App = () => {
    return (
        <div className="container">
            <div className="header">
                <h1>Welcome to React application</h1>
            </div>
        </div>
    )
}

export default App

and now run npm start and you'll see the output in your browser.

Configuration for your production environment.

If you have a webpack configuration for production then you'll need a different configuration for using CSS. At first, install mini-css-extract-plugin



npm i --save-dev mini-css-extract-plugin

and now extract the miniCssExtractPlugin and replace the style-loader with MiniCssExtractPlugin.loader and add the MiniCssExtractPlugin in plugin.
MiniCssExtractPlugin extracts CSS and create a CSS file per JS file.



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

module.exports = {
    mode: "production",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(css)$/,
             use: [MiniCssExtractPlugin.loader,'css-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [new MiniCssExtractPlugin()],
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
};

Now, run npm run build and you will see the external files generated in your public folder like main.css and main.css.map. If you want to check whether your build folder has everything as expected you can check it on by running it on the local web server, run this command on your command line.



npx http-server public

This will provide you a URL that you can visit in a browser.

Setting up Sass with webpack

If you happen to prefer Sass more than CSS like me then you need to install some packages to set up Sass with webpack.



npm i --save-dev sass-loader node-sass

node-sass provides binding Node.js to LibSass (The C version of Sass). sass-loader document says "The sass-loader requires you to install either Node Sass or Dart Sass on your own. This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use." Essentially this loader has internal dependencies which require node-sass.
sass-loader loads a Sass/SCSS file and compiles it to CSS.

Now let's update the webpack.config.js.



const path = require('path');

module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "eval-source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(s(a|c)ss)$/,
             use: ['style-loader','css-loader', 'sass-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: path.resolve(__dirname, './public'),
        hot: true
    },
};

We just need to add the sass-loader ahead of css-loader, so now first, the .scss file compiles back to CSS and after that process remains the same as explained above.
Next, let's change the app.css file to app.scss and update the file with our favorite sass features.

app.scss



.container {
    height: 100vh;
    background-color: #E7E3EB;
    .header {
        padding: 15px 20px;
        background-color: #6200EE;
        h1 {
            color: #FFF;
        }
    }
}

Now run npm start the result will be the same as above but now we have written Sass in place of CSS.

Sass configuration for production environment

Configuration for production remains pretty same as we did for CSS setup, we will be using the same mini-css-extract-plugin to extract our separate CSS file, it is just that we need to add sass-loader ahead of css-loader as we did earlier for our development configuration. The updated file will look like this.



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

module.exports = {
    mode: "production",
    entry: path.resolve(__dirname, './src/index.js'),
    devtool: "source-map",
    module: {
        rules: [
          {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             use: ['babel-loader']
          },
          {
             test: /\.(s(a|c)ss)$/,
             use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader']
          }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [new MiniCssExtractPlugin()],
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'bundle.js',
    },
};

Now build your project again by running npm run build and check the output by running in the local webserver.

Extras

Congratulations!! 🎉 You have now successfully set up CSS and Sass with webpack in your react project but your project needs a bit more than styles to make it more attractive and user friendly like images and fonts. I am will give a short tutorial on how to set them up with webpack.

Let's add a dev dependency to support these file formats.



npm i --save-dev url-loader

Font Setup

First, download fonts, for this tutorial purpose I have downloaded Open Sans Italic from google fonts and moved them in a folder (src/Assets/Fonts/). Now create a font.scss file and add the font face inside



@font-face {
    font-family: 'Open Sans Italic';
    src: url('./Assets/Fonts/OpenSansItalic.eot');
    src: url('./Assets/Fonts/OpenSansItalic.eot?#iefix') format('embedded-opentype'),
         url('./Assets/Fonts/OpenSansItalic.woff') format('woff'),
         url('./Assets/Fonts/OpenSansItalic.ttf') format('truetype'),
         url('./Assets/Fonts/OpenSansItalic.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

and let's import the fonts file inside app.scss and apply the fonts to <h1> tag.

app.scss



@import url(./font.scss);

.container {
    height: 100vh;
    background-color: #E7E3EB;
    .header {
        padding: 15px 20px;
        background-color: #6200EE;
        h1 {
            color: #FFF;
            font-family: 'Open Sans Italic';
        }
    }
}

Next, update the webpack.config.js to support all the file formats.



...
   rules: [
          ....
          {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                use: {
                  loader: 'url-loader',
                },
          },
          ....
          ]
...

Now, run npm start and now your font will be updated.

Image setup

To use images with webpack we just need to add the image file extension which we need inside the test of url-loader.
Updated webpack.config.js



...
   rules: [
          ....
          {
                test: /\.(woff|woff2|eot|ttf|svg|jpg|png)$/,
                use: {
                  loader: 'url-loader',
                },
          },
          ....
          ]
...

Now, let's update the app.jsx and app.scss.

App.jsx



import React from 'react';
import './app.scss';

const App = () => {
    return (
        <div className="container">
            <div className="header">
                    <h1>Welcome to React application</h1>
            </div>
            <div className="react-logo"></div>
        </div>
    )
}

export default App

app.scss



@import url(./font.scss);

.container {
    height: 100vh;
    background-color: #E7E3EB;
    .header {
        padding: 15px 20px;
        background-color: #6200EE;
        h1 {
            color: #FFF;
            font-family: 'Open Sans Italic';
        }
    }

    .react-logo {
        background: url('./Assets/Images/react-logo.png') no-repeat center;
        height: 500px;
        width: 500px;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

Now let's run the npm start again and see the output in the browser.

As we can see our image has been added and the fonts have been updated.
There are plenty of options for all the loaders we have used in this tutorial, I suggest you read the documents and use them according to your project needs or you can just explore them also.

Don't forget to give a ❤️ if you liked it and thanks for reading and if you want to support me then you can just buy me a coffee 😃

Happy coding! 🧑🏻‍💻

React setup with webpack for beginners

Deepanjan Ghosh — Mon, 26 Apr 2021 04:36:50 +0000

There are many ways to set up a react project and the popular ones you may hear of create-react-app and webpack. So today we'll see how to set up a react project with webpack and babel in a simple way.

So what is Webpack?

The definition says Webpack is a static module bundler for modern JavaScript applications and what do we mean by that?

Webpack is a bundler that bundles all the javascript files and internally it makes a dependencies graph that is responsible for mapping all your modules and depending on this graph it creates a bundle.js file that can be plugged into your HTML file.

So in this article, I want to show you how to set up your first react app with webpack and this will be a very minimal setup and afterward, you'll be able to extend the features depending on your needs.

1.Initial Phase (Folder Setup)

First, we'll start by creating a Project folder and then a public and src folder inside it. Public folder will be used to serve the application and this folder will be everything to publish your application. In the src folder, all the javascript files will be there and this folder will be bundled into a single javascript file and will be placed automatically in the public folder.

mkdir webpack-react
cd webpack-react
mkdir public src

Next, we'll create an index.html file inside the public folder with the following content.

cd public
touch index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React with webpack</title>
</head>
<body>
    <div>
        <h1>Hello Webpack</h1>
    </div>
    <script src="./bundle.js"></script>
</body>
</html>

2. Setting up Webpack

Now before we start installing webpack and other npm packages we need to set up package.json first. Setting up package.json is easy either you can do it manually by running npm init by this you can fill in all the details by yourself or you can let npm handle it by simply adding -y at the end like npm init -y. This will create the package.json in the root folder.
Let's install some packages first and I'll explain each one by one.

npm i webpack webpack-cli webpack-dev-server --save-dev

We need webpack to bundle all our javascript code to single and to build our application.
webpack-dev-server is needed to serve the application in the local web server for development purposes.
webpack-cli provides a flexible set of commands for developers to increase speed when setting up a custom webpack project.

(Note: Add a .gitignore file to avoid node_modules to push in git)

Let's add a start script now in package.json to run web-dev-server

...
    "start": "webpack serve --mode development"
...

You can run npm start on your command line to start the application on your local server. Now let's generate bundle.js and see how we can bundle all the javascript code into a single file. Now we need to add a webpack configuration so now we will add webpack.config.js in the root folder.

touch webpack.config.js

and update the start script in package.json.

...
start: "webpack serve --config ./webpack.config.js --mode development",
...

Next, let's create an index.js file inside src where all the javascript code will be linked.

cd src
touch index.js

and add a simple log inside it

console.log("Hello World")

Now will add an entry point inside the webpack configuration to bundle in our case it is src/index.js and if index.js imports another javascript file it bundles them too.
The next step is to add an output file which will be bundle.js and this file is linked to the public/index.html and third step is to add a folder that will be used by the webpack dev server to serve our application to the browser. The content will look like this.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
  },
};

(Note: path is used to resolve them properly across the operation system)

Now run npm start in your command line you'll see Hello World logged in your browser console.

Now we will add Babel to transpile back the modern javascript features (ES6 and others) to vanilla javascript. Let's install some packages for babel.

npm i @babel/core @babel/preset-env babel-loader --save-dev

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).
Loaders tell webpack how to interpret and translate files. The transformation happens on a per-file basis before adding to the dependency graph.

We need to add the babel in the build process in webpack.config.js. Your webpack.config.js will look like this.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
  },
};

(Note: module is added in which we have rules which will test all the .js file and exclude node_modules and will be using babel-loader for it)

Now let's add a babel configuration for that let's create a .babelrc file in the root folder and add the below configuration inside.

touch .babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

3. React with webpack

Till now we have set up the webpack and babel configuration to successfully bundle our javascript code but react is not all javascript, therefore, we need to support react syntax which is the .jsx file. So we need babel again to transpile the code. Let's add some more dependencies for that

npm i @babel/preset-react --save-dev

and also add the configuration to ./babelrc.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Now we need to add rules in webpack.config.js to make jsx file transpile.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
  },
};

Now we can write React with jsx code. Let's add the react packages and create a component.

npm i react react-dom --save

Creating a Home component inside a component folder in src.

cd src
mkdir components
touch Home.jsx

Home.jsx

import React from 'react';

const Home = () => {
return <div>React Application</div>
}

export default Home

Update the src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './components/Home';

ReactDOM.render(
  <Home />,
  document.getElementById('app')
);

And at last, let's update the index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

Now run npm start again and you'll able to see the Home component render and there it is how you can set up react with webpack. Although this is a very basic setup, this will give you an idea of how to add more loader and plugin and set it up according to your needs. I'll be writing more about the advanced features and how to make it work with your webpack in the upcoming posts.

Don't forget to give a ❤️ if you liked it and thanks for reading. Happy coding!! 🖥

(Note: I have not shown how to use CSS with webpack, I will explain those step in a future post and will also share a boilerplate of react with webpack soon.)

(Update: The second part of this post is now available, where I have explained How to setup Styles (css and sass) with webpack.)