title: Style loader not loading css in my <head>
body: <p>I am trying to import my css in my webpack bundle.</p>
  
  <p>We are creating an angular 1 application and we are bundle it with webpack. For the moment everything was fine. The html has the bunlde and vendor scripts. Other js are been in included and the views are copied and included.</p>
  
  <p>In this step we are trying to include a css file we create in a styles/ folder. For the output I guess that the css file is processed by css-loader, but the style-loader didn't include the css file in the  tag.</p>
  
  <p>Can anyone give me a hint?</p>
  
  <p>My webpack.config in the rules is like this.</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  var CopyWebpackPlugin = require('copy-webpack-plugin');
  
  const webpack = require ('webpack'); module.exports = {
     mode: 'development',
     entry: {
        vendor: ['angular', '@uirouter/angularjs'],
        app: './src/index.js'
     },
     devtool: 'inline-source-map',
     devServer: {
       contentBase: 'dist',
       hot: true,
       inline: true,
       open:'chrome',
     },
     plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
         title: 'Output Management',
         template: './src/index.html',
       }),
       new webpack.HotModuleReplacementPlugin(),
       new CopyWebpackPlugin([
         {
           from: './src/views/**/*',
           to: ''
         },
       ], {
         ignore: [],
         copyUnmodified: true
       })
     ],
     output: {
       filename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       },
       {
         test: /\.html$/,
         use: {
           loader: 'html-loader',
           options: {
           attrs:[
             ':data-src'
           ]
         }
       }
     }
    ]
   }
  };
  </code></pre>
  
  <p>My index.html is </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Getting Started&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;a ui-sref="about" ui-sref-active="active"&gt;About&lt;/a&gt;
        &lt;ui-view&gt;&lt;/ui-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My index.js is like this:</p>
  
  <pre><code>import first_controller from './controllers/first_controller.js';
  import uiRouter from '@uirouter/angularjs';
  //import css from './styles/main.css'; // I try this also
  import './styles/main.css'; //This isn't working either.
  
  var app = angular.module ('app', ['ui.router']);
  app.controller ('first_controller', first_controler);
  app.config(function($stateProvider) {
  
  var exampleState = {
    name: 'example',
    url: '/example',
    templateUrl: './src/views/example.html',  } 
  $stateProvider.state(exampleState );
  </code></pre>
  
  <p>});</p>
  
  <p>my css in the folder /styles/main</p>
  
  <pre><code>.example_css {
     color: red;
  }
  </code></pre>
  
  <p>And the example view is:</p>
  
  <pre><code>&lt;div class="example_css"&gt;Example&lt;/div&gt;
  </code></pre>
  
  <p>My package.json is:</p>
  
  <pre><code>{
    "name": "Example",
    "version": "1.0.0",
    "main": "webpack.config.js",
    "scripts": {
      "build": "webpack --colors",
      "start": "webpack-dev-server --progress --colors --watch --inline --open"
    },
    "devDependencies": {
      "angular": "^1.7.7",
      "clean-webpack-plugin": "^2.0.0",
      "copy-webpack-plugin": "^5.0.0",
      "css-loader": "^2.1.1",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "style-loader": "^0.23.1",
      "webpack": "^4.29.6",
      "webpack-cli": "^3.2.3",
      "webpack-dev-server": "^3.2.1"
    },
    "dependencies": {
      "@uirouter/angularjs": "^1.0.22"
    }
  }
  </code></pre>