bundling css with webpack

Question

I am new to webpack. I am using it to bundle an aurelia app website.

It bundles the html, and it also finds all images and puts them into the dist folder. This works and runs without error.

Now I want to bundle the css in the same way. I am expecting for the css to get moved to the 'dist' folder like the images.

However, the css does not seem to get processed by webpack when I run build. There are no messages about finding the css like there are with the images.

This is what I am expecting webpack to process:

<link href="../css/main.css" rel="stylesheet">

Is there something I am doing wrong?

const path = require("path");
const {AureliaPlugin} = require("aurelia-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: { main: "aurelia-bootstrapper" },

  ///dev
  devtool: 'source-map',

  ///Prod
  //devtool: 'source-map',

  output: {
    path: path.join(__dirname, "wwwroot", "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  },

  resolve: {
    extensions: [".js"],
    modules: ["App", "node_modules"],    
  },

  module: {
    rules: [
        { test: /\.html$/i, loaders: "html-loader" },
        { test: /\.css$/, loader: "style-loader!css-loader" },      {
          test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader", options: {
              name: './images/[name].[hash].[ext]',
          }
        }
     ]
  },

  plugins: [
      new AureliaPlugin()
  ]
};

Answer 1

By default, the css will be embedded into your app.js. If you want to separate them, use css-loader in conjunction with ExtractTextPlugin:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
    rules: [
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }
    ]
},
plugins: [
    new ExtractTextPlugin("styles.css")
]

Note also to reference the added css in your html file:

   <link rel="stylesheet" href="/dist/styles.css">

https://github.com/webpack-contrib/extract-text-webpack-plugin