SWC with JavaScript: Handling CSS and Absolute Imports (2026)

If you're transitioning from Babel to SWC in your JavaScript projects, you might encounter challenges with handling CSS imports and absolute imports. This guide will walk you through the steps to configure SWC for these scenarios, ensuring a smoother migration process.

Key Takeaways

• Learn how to configure SWC to handle CSS imports in React components.
• Understand the setup for absolute imports with SWC in tests and components.
• Explore the benefits of migrating from Babel to SWC for faster builds.
• Troubleshoot common issues encountered during the migration.

Switching from Babel to SWC offers performance improvements, as SWC is written in Rust and is significantly faster. However, SWC's configuration differs, and correctly setting up CSS and absolute imports is crucial for maintaining project functionality.

Prerequisites

• Basic understanding of JavaScript and React.
• Familiarity with Node.js and npm/yarn.
• Experience with module bundlers like Webpack.
• A project previously configured with Babel.

Step 1: Install SWC Dependencies

First, ensure you have the necessary SWC packages installed. SWC provides a set of tools and plugins that make the migration straightforward.

npm install @swc/core @swc/jest @swc/cli --save-dev

These packages include the SWC core, Jest plugin, and command-line interface needed for builds and tests.

Step 2: Configure SWC for CSS Imports

SWC does not natively support CSS imports like Babel does. We need to employ a workaround using a CSS loader.

// Add this to your webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

This configuration uses Webpack's style-loader and css-loader to process CSS files.

Step 3: Set Up Absolute Imports

To handle absolute imports, you need to configure your project's jsconfig.json or tsconfig.json file to recognize paths.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

This setup allows imports like import Button from '@components/Button' to work seamlessly.

Step 4: Update Test Scripts

With SWC, you need to update your test scripts to leverage the SWC Node project and Jest plugin.

{
  "scripts": {
    "test": "SWC_NODE_PROJECT=./jsconfig.json jest"
  }
}

This script uses your jsconfig.json for path resolution during tests.

Common Errors/Troubleshooting

Here are some common issues you might face and their solutions:

• CSS Not Loading: Ensure your Webpack configuration includes style-loader and css-loader.
• Absolute Import Errors: Double-check your jsconfig.json paths and the base URL setting.
• Tests Failing: Confirm that the SWC_NODE_PROJECT environment variable points to the correct configuration file.

By following these steps, you should be able to transition to SWC smoothly, taking advantage of its performance benefits while maintaining full functionality in your JavaScript applications.

Frequently Asked Questions

Why switch from Babel to SWC?

SWC offers faster build times as it is written in Rust, which can improve development efficiency significantly.

How do I handle CSS imports with SWC?

Use Webpack with style-loader and css-loader to process CSS files, as SWC does not natively support CSS imports.

What are absolute imports?

Absolute imports allow you to use absolute paths instead of relative paths, making your code cleaner and easier to maintain.

How can I troubleshoot SWC compilation errors?

Check your configuration files like jsconfig.json for path correctness and ensure all necessary loaders are included in your build setup.