Custom Styles Not Loading
Unanswered
Asian paper wasp posted this in #help-forum
Asian paper waspOP
Original Problem:
https://discord.com/channels/752553802359505017/1116875558920409129
Original Solution:
https://fontawesome.com/docs/web/use-with/react/use-with
The original problem was that the Font Awesome icons weren't loading correctly in our Next app. The solution above resolved that issue, but created a new one.
The
Not really sure what to do here.
https://discord.com/channels/752553802359505017/1116875558920409129
Original Solution:
https://fontawesome.com/docs/web/use-with/react/use-with
The original problem was that the Font Awesome icons weren't loading correctly in our Next app. The solution above resolved that issue, but created a new one.
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = falseThe
config.autoAddCss is where our new problem is at. If we remove this, our styles load again, but the icons are broken. When it add it back, the icons load correctly, but our styles files don't load anymore. Not really sure what to do here.
30 Replies
@Asian paper wasp Original Problem:
https://discord.com/channels/752553802359505017/1116875558920409129
Original Solution:
https://fontawesome.com/docs/web/use-with/react/use-with
The original problem was that the Font Awesome icons weren't loading correctly in our Next app. The solution above resolved that issue, but created a new one.
ts
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
The `config.autoAddCss` is where our new problem is at. If we remove this, our styles load again, but the icons are broken. When it add it back, the icons load correctly, but our styles files don't load anymore.
Not really sure what to do here.
this works perfectly
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "./globals.css";
config.autoAddCss = false;
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head />
<body>{children}</body>
</html>
);
}so i need to see more code to reproduce this
@joulev this works perfectly
ts
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "./globals.css";
config.autoAddCss = false;
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head />
<body>{children}</body>
</html>
);
}
Asian paper waspOP
This is my
/src/pages/_app.tsx file.// NPM Modules
import React from 'react';
import type { AppProps } from 'next/app';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
// Custom Modules
import { DefaultSeo } from 'next-seo';
import SEOConfig from '@/../seo.config';
import '@/assets/scss/style.scss';
// config
config.autoAddCss = false;
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<DefaultSeo {...SEOConfig} />
<Component {...pageProps} />
</>
);
}@Asian paper wasp This is my `/src/pages/_app.tsx` file.
ts
// NPM Modules
import React from 'react';
import type { AppProps } from 'next/app';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
// Custom Modules
import { DefaultSeo } from 'next-seo';
import SEOConfig from '@/../seo.config';
import '@/assets/scss/style.scss';
// config
config.autoAddCss = false;
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<DefaultSeo {...SEOConfig} />
<Component {...pageProps} />
</>
);
}
import { AppProps } from "next/app";
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "~/styles/globals.scss";
config.autoAddCss = false;
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}still working fine
Asian paper waspOP
Shit. Here goes another few days trying to debug something stupid.
you need to produce a minimal reproduction repository
without it i cannot say anything because everything is working fine
@joulev you need to produce a minimal reproduction repository
Asian paper waspOP
This is from the MinRepro repo. Where we fixed the original problem.
all i say is, i need a repo that is minimal and can reproduce the problem of "custom styles not loading". until i have it, i won't say anything else because i cant say anything
because as you see, it's pretty easy to confirm that sass and fontawesome play with each other well
can you give me something more minimal
Asian paper waspOP
And we are back to my original statement of a few days to figure it out. It will take time to gut the project, because the issues don't show up in local. Only when deployed.
@joulev can you give me something more minimal
Asian paper waspOP
I gutted the repo. Now, it's only the home page with just header/footer/hero. If you need it to be more minimal, then I'll need specifics.
got it will have a look when i have time
@Asian paper wasp I gutted the repo. Now, it's only the home page with just header/footer/hero. If you need it to be more minimal, then I'll need specifics.
i commented out the
Header from global.template.tsx because it makes dev mode horribly slow for god knows what reason. other than that it works perfectlyzero changes other than removing
next/image and changing it to "Test" because i dont have the imageAsian paper waspOP
This is not deployed.
@Asian paper wasp This is not deployed.
npm run build and npm starticons + styles are working perfectly
except for the fonts
hmm yes i see what you mean, in prod mode the scss appears to not load at all
maybe raise a bug report in the fontawesome repo
Asian paper waspOP
Submitted an issue with Font Awesome and Next.js.
American
@Asian paper wasp -- did you find a solution for this? I just noticed that my latest deploy is missing styles that are declared in scss modules. not sure what happened. it's across multiple spots on the site
Asian paper waspOP