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.

[alexsilva]

This loader allows you to insert content with the style tag. I think it's close to what was described here.

https://webpack.js.org/loaders/style-loader/

The tag {% render_bundle 'main' 'css' %} renders style.

    entry: {
        main: [
            path.join(__dirname, 'assets/src/js/index.js'),
            path.join(__dirname, 'assets/src/css/index.scss'),
        ]
    },
  ...

    {
        test: /\.s?(css)$/,
        use: [
            {
                loader: 'style-loader', // inject CSS to page
            },
            {
                loader: 'css-loader', // translates CSS into CommonJS modules
            },
            {
                loader: 'postcss-loader', // Run post css actions
                options: {}
            },
            {
                loader: 'sass-loader' // compiles Sass to CSS
            }
        ]
    },
],

WEBPACK_LOADER = {
    'INLINE': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': BASE_DIR / 'webpack-inline-stats.json',
    }
}

{% render_bundle 'main' 'css' config='INLINE' %}