CODEWITHSUNDEEP
javascripthtmlcssnode.jswebpack
Andrea Silvestri
Andrea Silvestri

Reputation: 1134

webpack-dev-server injects CSS webpack doesn't

I'm new to webpack and I'm facing an issue while trying to build a simple webpage. While I don't have problems when using webpack-dev-server, when I build my application with webpack I don't see the CSS inside the index.html file.

Here is the webpack.conf.js:

var path = require( "path" );

const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

module.exports = {

    entry: {
        index: path.join( __dirname, "src", "index.js" )
    },

    output: {
        path: path.join( __dirname, "dist" ),
        filename: "bundle.js"
    },

    devServer: {
        host: '0.0.0.0',
        port: 9000,
        writeToDisk: true
    },

    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                exclude: /(node_modules)/,
                use: ['file-loader'],
            },
            {
                test: /\.svg$/,
                exclude: /(node_modules)/,
                loader: 'svg-inline-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["@babel/preset-env"] }
                }
            },
            {
                test: /\.styl$/,
                exclude: /(node_modules)/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader",   // translates CSS into CommonJS
                    "stylus-loader" // compiles Stylus to CSS
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin( {
            filename: 'index.html',
            template: path.join( __dirname, "src", "index.html" ),
            inject: true
        } ),
    ]
};

This is the index.js:

import "./css/index.styl";
import "./css/graphics.styl";
import "./js/polyfills.js"
import "./js/manager.js"

console.log( "TEEEEEEEEEEEEEEEEST" );

Here the index.html:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
</head>

<body>
    <div id="graphicsContainer" class="graphics-container">
        <%=require('./assets/images/barca_onde.svg')%>
    </div>
</body>

</html>

I run the dev mode with this command:

./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config /app/webpack.config.js --mode development --color --watch

While the build command I use is this:

./node_modules/webpack/bin/webpack.js --config /app/webpack.config.js --mode production --color

Both commands don't show any error, but the first generates the bundle.js, the inline SVG, the CSS code and injects them in the index.html while the second only generates bundle.js and the SVG and injects them in index.html leaving the CSS out.

What am I missing? Thank you in advance!

Upvotes: 2

Views: 2298

Answers (1)

backtick
backtick

Reputation: 2775

This is happening because your configuration isn't set up to write your compiled CSS to a file. The injection of style only happens in development mode, which is why you aren't seeing it when you build in production mode.

If you're using the latest major release of webpack (which is 4 as of this answer), you'll want to use MiniCssExtractPlugin. It replaces style-loader in your configuration.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV === 'development';

// ...

{
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],
  rules: [
    {
        test: /\.styl$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: devMode },
          },
          "css-loader",
          "stylus-loader"
        ]
    }
  ]
}

For prior major releases of webpack, see ExtractTextWebpackPlugin.

Upvotes: 1

Related Questions