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

#

App Router

If you are using the App Router  then you do not need any additional configuration.

#

Pages Router

If you are using the Pages Router  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",
      },
    ],
  },
};