webpack not creating CSS file for SCSS

Question

This is my package.json

{
  "name": "login-ts-react",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "style-loader": "^0.21.0",
    "mini-css-extract-plugin": "^0.4.0",
    "@types/react": "^16.3.11",
    "@types/react-bootstrap": "^0.32.8",
    "@types/react-dom": "^16.0.5",
    "awesome-typescript-loader": "^5.0.0-1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "import-glob-loader": "^1.1.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.4",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.0.1",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.8.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3",
    "webpack-env": "^0.8.0"        
  }
}

And this is my webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        enforce: 'pre',
        test: '/\.jsx?$/',
        loader: 'source-map-loader'
      },
      {
        test: /\.s?[ac]ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }      
    ]      
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ],
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.scss']
  }
}

My understanding is that when I run my application and access is from the browser, I should see a bundle.js and a bundle.css.

When I run my application and see the network tab of chrome develop tools, I see bundle.js but there is no bundle.css.

I have the following SCSS file in my project

$header-img: image-url('../images/image.gif', false, false);
.bg {
  background-image: $header-img;
  width: 100%;
  height: 100vh;
}

Why is webpack not emitting any CSS file for me?

Edit:: Based on suggestion below I added the line to my index.tsx file

require('../styles/style') 

Now there are no errors. but still no *.css file in the network output.

Answer 1

Did you make sure to import your main .scss file in your ./src/index.tsx?

e.g:

require('./main.scss');