If you need to start by installing webpack and getting the basics (before setting up babel) installed then checkout my guide to setting up Webpack - then come back here to continue and install babel.

Including your CSS stylesheet in your Javascript file

I am going to assume at this point you have webpack set up, and have a JS file such as index.js.

Create a CSS file with some rules in.

Then in your index.js (or `app.js, etc) you have to import that CSS file in:

require('./style.css');

Install some webpack loaders to make use of your CSS stylesheet import

Run the following to install a couple of packages which will help include the stylesheets

yarn add -D style-loader css-loader

Update webpack.config.js and add the CSS loaders

If you do not have a webpack.config.js file then create it. Update it with the CSS rule below:

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },

     // Relevant bit of config for style loader and css loader:
      {
        test: /\.css$/,
        // the order of `use` is important!
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      },
    ]
  },
};

Now when you build your assets with webpack, your compiled JS file will also include your CSS rules.

Use webpack to build your assets and export to separate CSS stylesheet files

The config so far has imported your CSS, and combined it in the JS that is built in /dist/index.js.

You will probably actually want to have a separate .css file, instead of combining it with your JS file.

Here is how

Install mini-css-extract-plugin to extract the CSS to its own file

Run yarn add -D mini-css-extract-plugin.

Update webpack.config.js to use MiniCssExtractPlugin

Once you have the package installed, you must update your webpack.config.js file

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

const path = require('path');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
],
  entry: {
    'index': './src/index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {test: /\.js$/, loader: 'source-map-loader'},

      // Relevant config for MiniCssExtractPlugin:
      // (the order of `use` is important)
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

How to export different CSS files from webpack

If you have several different CSS files and you wish to build them as different files (in /dist), e.g. /dist/style.css, /dist/admin-panel.js then you can do the following:

//... 
  entry: {
    'index': './src/index.js', // (your main JS)
    'style': './src/public-css.css', // (first css file)
    'admin-panel': './src/admin-panel-css.css', // (another css file)
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
// ...

How to setup Sass/Scss stylesheets with webpack

I love Sass! It makes developing CSS much easier and quicker. Here is a guide to setting up Sass in your webpack config so you can build from Sass files and export css files.

Install Sass and the webpack Sass loader packages

yarn add -D node-sass sass-loader

Set up webpack config to use the sass loaders

In the rules part of your webpack config, add a rule for .scss / .sass files.

     {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ]
      }