Webpack build successfull but styles.css file style is not reflecting

Question

I am developing a web application in angular 5.Now I have included webpack 4 in my application.But There is a problem all styles written in styles.css file are not reflecting in the build created from webpack. Need solution for this problem. Below is my webpack.common.js file which is used for loading diffrent types of files present in my application build always succeed but the styles.css code is not reflection on my site when it gets loaded in browser.But code written in components .scss file reflects properly i have searched a lot but did not find any solution for this issue why is is happening.

import styles from './styles.css';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
  entry: {
    'polyfill': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: ['awesome-typescript-loader','angular2-template-loader','angular-router-loader'
        ],
        exclude:[/node_modules/]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/images/[name].[hash].[ext]'
      },
      {
        test: /\.(css|scss)$/,
        include: helpers.root('src', 'app'),
        loaders: ['css-loader']
    },

      {
        test: /\.js$/,
        include: helpers.root('src', 'app'),
        loader: 'babel-loader',
        exclude:[/node_modules/],
        query:{
          presets:['es2015']
        }


      }
    ]
  },
plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),
    new ExtractTextPlugin("src/styles.css"),


    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

Answer 1

You should import your css stylesheet using @import from your main css/scss stylesheet.

Do NOT import a css file as a javascript module from the webpack config file. This has no sense.