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",
      },
    ],
  },
};

#

Jest

#

Mock CSS imports

Jest does not support CSS imports by default and needs to be manually configured to handle them.

Install the jest-transform-stub package.

npm install -D jest-transform-stub

pnpm add -D jest-transform-stub

yarn add --dev jest-transform-stub

bun add --dev jest-transform-stub

Stub CSS files by transforming them into empty modules in your Jest config file.

module.exports = {
  moduleNameMapper: {
    "\\.css$": "jest-transform-stub",
  },
};