How to inline css files?

[sowinski]

Hi,

on some pages I would like to inline css files.

Is this possible with django-webpack-loader? If yes how can I do this?

Thank you

[aastashov]

Maybe this?

# webpack.config.js
const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

  // ...
  entry: {
      main: ['./static/scripts/main.js', './static/styles/main.css'],
      // ...
  }
  output: {
      path: path.resolve('./static/bundles/'),
      filename: '[name].[chunkhash].js',
      hashFunction: 'md5',
      hashDigestLength: 10
  },
  plugins: [
    new BundleTracker({filename: './webpack-static.json'}),
    new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
  ],
  module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        }
      ]
    }
  // ...

# file.html
{% load render_bundle from webpack_loader %}

{% block head %}
  {% render_bundle 'main' 'js' %}
  {% render_bundle 'main' 'css' %}
{% endblock %}

# settings.py

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': BASE_DIR / 'webpack-stats.json',
    },
}

[fjsj]

Currently django-webpack-loader doesn't support inlining. The render_bundle template tag only renders links and scripts. Please feel free to open a PR with this desired behavior.