#SCSS file does not work

1 messages · Page 1 of 1 (latest)

upbeat terrace
#

import './globals.scss';

I have import scss file to layout.js and it's not working

smoky elbowBOT
#

Hi @upbeat terrace. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

It seems you're trying to import a global SCSS file in your layout.js. To do this, you should import the global SCSS file inside pages/_app.js instead of layout.js. Here's how you can do it:

  1. First, make sure you have installed sass:
npm install --save-dev sass

  1. Create a pages/_app.js file if it's not already present.

  2. Import the globals.scss file in pages/_app.js:

import '../globals.scss';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Remember to adjust the import path according to your project structure.

For more information, refer to the Next.js Sass documentation (https://nextjs.org/docs/app/building-your-application/styling/sass).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@upbeat terrace kapa.ai is still learning and improving, please let us how it did by reacting below

upbeat terrace
#

@smoky elbow

smoky elbowBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Sorry @upbeat terrace, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

upbeat terrace
#

@smoky elbow I'm using NextJS 13 and using app routing, there's no pages/_app.js rather than app/page.js

smoky elbowBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Apologies for the confusion. Since you're using Next.js 13 with app routing, you should import the global SCSS file inside the root layout (app/layout.js). Here's how you can do it:

  1. First, make sure you have installed sass:
npm install --save-dev sass
  1. Import the globals.scss file in app/layout.js:
import './globals.scss';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Remember to adjust the import path according to your project structure.

For more information, refer to the Next.js Sass documentation (https://nextjs.org/docs/app/building-your-application/styling/sass) and the App Router Incremental Adoption Guide (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Styling: Sass

Style your Next.js application using Sass.

#

@upbeat terrace kapa.ai is still learning and improving, please let us how it did by reacting below

upbeat terrace
#

@smoky elbow

smoky elbowBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Sorry @upbeat terrace, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

upbeat terrace
#

The background-image doesn't work with local files but work with online URL @smoky elbow

smoky elbowBOT
#

Let me check the knowledge base for you. One moment! :books:

#

When using local images as background images in CSS, you should place the image files in the public folder and reference them with a relative path in your CSS file. Here's an example:

  1. Place your image file (e.g., background.jpg) in the public folder.

  2. In your SCSS file, use the relative path to the image file:

.className {
  background-image: url('/background.jpg');
}

Keep in mind that the next/image component is specifically designed for optimizing images in Next.js, but it doesn't apply to background images in CSS. The example above shows how to use a local image as a background image in a CSS file.

For more information on using images in Next.js, refer to the Image Optimization documentation (https://nextjs.org/docs/basic-features/image-optimization).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@upbeat terrace kapa.ai is still learning and improving, please let us how it did by reacting below

upbeat terrace
#

What's the difference between app routing and page routing @smoky elbow

smoky elbowBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The main difference between app routing and page routing in Next.js is the way they handle routing, layouts, and React features.

Page Routing (Pages Router):

  • Page routing was the primary way to create routes in Next.js before version 13.
  • It uses a file-system based router to map each file in the pages directory to a route.
  • It has limitations in handling shared layouts, nested routing, and data fetching.
  • You need to use a custom _app.js file to customize the global shared layout, which doesn't support composing other layout components or colocating data fetching with the component.

For more information on page routing, refer to the Pages Router documentation (https://nextjs.org/docs/pages).

App Routing (App Router):

  • App routing was introduced in Next.js 13 as a new paradigm for building applications using React's latest features.
  • It's built on React Server Components (https://nextjs.org/docs/getting-started/react-essentials#server-components) and supports shared layouts, nested routing, loading states, error handling, and more.
  • The App Router works in a new directory named app, which works alongside the pages directory to allow for incremental adoption.
  • It allows you to easily adopt React Server Components and Client Components, and it's deeply integrated with React Suspense for selective hydration and improved perceived loading performance.

For more information on app routing, refer to the App Router documentation (https://nextjs.org/docs/app).

Getting Started: React Essentials

An overview of essential React features for building Next.js Applications, including Server Components.

#

In summary, the App Router is a more advanced and flexible routing system that leverages the latest React features, while the Pages Router is the older routing system with some limitations. For new applications, it's recommended to use the App Router, and for existing applications, you can incrementally migrate to the App Router.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@upbeat terrace kapa.ai is still learning and improving, please let us how it did by reacting below

upbeat terrace
#

Does NextJS make ReactRouter obsolete @smoky elbow ?

smoky elbowBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Next.js doesn't make React Router obsolete, but it provides its own routing system that is optimized for server-rendered React applications. The main difference is that Next.js has built-in support for server-side rendering, static site generation, and API routes, while React Router is a client-side routing library for React applications.

With Next.js, you have two routing options:

  1. Pages Router: The older file-system based routing system, where each file in the pages directory maps to a route. More information can be found in the Pages Router documentation (https://nextjs.org/docs/pages).

  2. App Router: Introduced in Next.js 13, it's a more advanced routing system built on React Server Components, supporting shared layouts, nested routing, loading states, error handling, and more. More information can be found in the App Router documentation (https://nextjs.org/docs/app).

While you can still use React Router with Next.js, it's generally recommended to use Next.js' built-in routing system for better integration with its features, such as server-side rendering, static site generation, and API routes.

In summary, Next.js doesn't make React Router obsolete, but it offers its own routing system that is tailored for server-rendered React applications and provides additional features.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@upbeat terrace kapa.ai is still learning and improving, please let us how it did by reacting below

upbeat terrace
#

What is API endpoint? @smoky elbow

smoky elbowBOT
#

Let me check the knowledge base for you. One moment! :books: