CODEWITHSUNDEEP
javascriptcssangularjswebpackwebpack-style-loader
jasc
jasc

Reputation: 81

Style loader not loading css in my <head>

I am trying to import my css in my webpack bundle.

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.

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.

Can anyone give me a hint?

My webpack.config in the rules is like this.

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'
         ]
       }
     }
   }
  ]
 }
};

My index.html is 

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
      <a ui-sref="about" ui-sref-active="active">About</a>
      <ui-view></ui-view>
  </body>
</html>

My index.js is like this:

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 );

});

my css in the folder /styles/main

.example_css {
   color: red;
}

And the example view is:

<div class="example_css">Example</div>

My package.json is:

{
  "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"
  }
}

Upvotes: 4

Views: 4192

Answers (1)

Vlad Marchuk
Vlad Marchuk

Reputation: 129

Depending on your webpack version you want to use extract-text-webpack-plugin or mini-css-extract-plugin to put styles into a file.

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

To include a path to CSS file in index.html on build - see how to create templates with HtmlWebpackPlugin.

Upvotes: 1

Related Questions