@import not showing Fontawesome icons in CSS-in-JS

Question

This was how I was importing Fontawesome icons:

src/App.css

@import "@fortawesome/fontawesome-free/css/all.css";`

When I moved that @import to CSS-in-Js (emotion):

src/App.js

// JS:
const imports = css`
  @import "@fortawesome/fontawesome-free/css/all.css";`
`

// JSX:
<Global styles={imports} />

The Fontawesome icons stopped displaying.

I had to be more explicit with the Node module's path for the Fontawesome icons to show again:

const imports = css`
  @import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
`

Is it because the second @ only works in CSS? Or there's another reason?

Answer 1

The @import rule in css must be defined at the top of the stylesheet before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

When you moved the @import to CSS-in-JS, the path @fortawesome/fontawesome-free/css/all.css was not being resolved correctly. You had to provide the relative path from the current file to the Fontawesome css in your node_modules directory. This is because CSS-in-JS do not have the same ability to resolve module paths as traditional css preprocessors or bundlers.

import { css } from '@emotion/react';
import '@fortawesome/fontawesome-free/css/all.css';

const styles = css`
 /* Your styles here */
`;

// Then in your component
<div css={styles}>Your content</div>