Webpack not bundling SCSS / CSS

Question

I'm trying to create a webpack config for working with a static site, using SCSS .

 "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --mode development"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "live-server": "^1.2.1",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }

My webpack.config.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    devServer: {
        port: 8080
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-env']
          }
      },
      ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
          inject: true,
          chunks: ['index'],
          filename: 'index.html'
        })
      ]
}

My app is in the following structure:

I was expecting when I run npm start to see my scss appearing as a css file within my index.html .

It does not look to be picking it up at all though.

Answer 1

I see your webpack config is not correct because you are using scss not css

Below is my config. You can view more here

{
    test: /\.scss$/,
    use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                minimize: true,
                sourceMap: true
            }
        },
        {
            loader: "sass-loader"
        }
    ]
},

Then import in your js file like this

import "main.scss";