How to force webpack to put the plain CSS code into HTML head's style tag?

html css webpack sass

11,604

I've done this before only using style-loader that by default will add your css as style inline at <head> tag. This won't generate any output css file, this just will create one/multiple style tags with all you styles.

webpack.config.js

module.exports = {
  //... your config

  module: {
    rules: [
      {
        test: /\.scss$/, // or /\.css$/i if you aren't using sass
        use: [
          {
            loader: 'style-loader',
            options: { 
                insert: 'head', // insert style tag inside of <head>
                injectType: 'singletonStyleTag' // this is for wrap all your style in just one style tag
            },
          },
          "css-loader",
          "sass-loader"
        ],
      },
    ]
  },

  //... rest of your config
};

index.js (entry point script)

import './css/styles.css';

11,604

Author by

netdjw

Building applications with Laravel & Angular & building websites in perl, PHP, Laravel and MySql with HTML5, CSS3 and jQuery, Vue. I'm teaching young people to the basics of webdevelopment, and help them to evolve in their career. With my 4 friends we found a company in Salgotarjan. It is a disadvantaged city in Hungary, EU. We employee these young people, they earn money while they are learning, and they learning by doing, so they work actually under senior webdeveloper's wings.

Updated on June 04, 2022

Comments

netdjw almost 2 years

I have this webpack.config:

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineStylePlugin = require('html-webpack-inline-style-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: [
      './src/scss/main.scss'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '',
    filename: 'js/[name].js'
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'css-loader',
          'sass-loader',
        ]
      },
      // ... other stuffs for images
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/main.html',
      filename: 'main.html'
    }),
    new HtmlWebpackInlineStylePlugin()
  ]
};

I tried this configuration, but this isn't working well, because the CSS code is generated into the main.css file.

But if I write the CSS code directly into the <head> tag as a <style>, it's working.

How can I set up the webpack to put the CSS code from Sass files into the HTML as inline CSS?

Or is there a tick to put the CSS first into the <head> and after this the html-webpack-inline-style-plugin plugin can parse it?

Alexander Tsepkov about 5 years

Any chance you could throw together a gist showing a complete example? I've included your recommended logic in my config with minor modifications (I'm trying to inline vanilla css links in HTML rather than scss files) and while I get no errors, the config seems to ignore my css.
The.Bear about 5 years

@AlexanderTsepkov This only will work if you import a main.css in your main.js (import style from './file.css';) or if you have the style entry as the question did it. Like following example github.com/webpack-contrib/style-loader#usage check it out. Also, if you share me a link where I can see your code, I can help you and update my awnser if something new is required.