Use a CSS File

Building off the inline css logic in the previous section, we're going to use the extract text plugin to write the css to a single file instead of inlining it onto the page.

Let's install the plugin:

npm install --save extract-text-webpack-plugin

Our updated webpack config code looks like this:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: __dirname,

  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },

  entry: {
    app: './js/app.js'
  },

  module: {
    loaders: [
      {test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}
    ]
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ]
}

This configuration will output a CSS file to build/app.css. Now we just need to include this file in our HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="./build/app.js"></script>
  </head>
  <body>
    <div class="banner">
      This is a banner
    </div>
    <link rel="stylesheet" href="./build/app.css" media="screen" charset="utf-8">
  </body>
</html>

results matching ""

    No results matching ""