With Webpack

Install

Yarn

yarn add --dev @griffel/webpack-plugin

NPM

npm install --save-dev @griffel/webpack-plugin

Usage

Within your Webpack configuration object, you'll need to add the loader and the plugin from @griffel/webpack-plugin like so:

const { GriffelPlugin } = require('@griffel/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        // Apply "exclude" only if your dependencies **do not use** Griffel
        // exclude: /node_modules/,
        use: {
          loader: '@griffel/webpack-plugin/loader',
        },
      },
      // "css-loader" is required to handle produced CSS assets by Griffel
      // you can use "MiniCssExtractPlugin.loader" to handle CSS insertion
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin(), new GriffelPlugin()],
};

• mini-css-extract-plugin is not mandatory and is used as an example, you can use other tooling to inject CSS on a page

style-loader is not supported

style-loader does not produce necessary assets for the Griffel plugin to order CSS rules correctly. Using it to handle CSS insertion would result in partially broken styling in your app.

For better performance (to process less files) consider using include for @griffel/webpack-plugin/loader:

const { GriffelPlugin } = require('@griffel/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        include: [
          path.resolve(__dirname, 'components'),
          /\/node_modules\/@fluentui\/,
          // see https://webpack.js.org/configuration/module/#condition
        ],
        use: {
          loader: '@griffel/webpack-plugin/loader',
        },
      },
    ],
  },
};

ignoreOrder option

If you use mini-css-extract-plugin, you may need to set it to false to remove warnings about conflicting order of CSS modules:

WARNING in chunk griffel [mini-css-extract-plugin]
Conflicting order. Following module has been added:
  - couldn't fulfill desired order of chunk group(s)

This will not affect the order of CSS modules in the final bundle as Griffel sorts own CSS modules anyway.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      ignoreOrder: true,
    }),
  ],
};

Usage with Rspack

@griffel/webpack-plugin is compatible with Rspack. The same plugin and loader work with Rspack's webpack-compatible API. Note that Rspack has built-in CSS support via experiments.css, so mini-css-extract-plugin is not needed:

const { GriffelPlugin } = require('@griffel/webpack-plugin');

module.exports = {
  experiments: {
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: [{ loader: '@griffel/webpack-plugin/loader' }],
      },
    ],
  },
  plugins: [new GriffelPlugin()],
};

Configuration

Please check the README of @griffel/webpack-plugin to check how to configure module evaluation and imports.