CSS Imports

All Axiom components import their own CSS files via import statements from within the JS code.

Depending on your bundler you might require additional configuration to enable CSS imports.

#

Next.js

#

Turbopack

If you are using Turbopack  then you need to add our packages to the optimizePackageImports  option:

export default {
  // ...
  experimental: {
    optimizePackageImports: ["@optiaxiom/globals", "@optiaxiom/react"],
  },
};

#

Webpack

If you are using Webpack then you need to add our packages to the transpilePackages  option:

export default {
  // ...
  transpilePackages: ["@optiaxiom/globals", "@optiaxiom/react"],
};

#

Webpack

#

Configure loaders

Follow the Webpack Asset Management  guide to configure loading CSS and fonts.

Install the required style loaders.

npm install -D style-loader css-loader

pnpm add -D style-loader css-loader

yarn add --dev style-loader css-loader

bun add --dev style-loader css-loader

Add the appropriate loaders in your Webpack config file.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
    ],
  },
};