How to use SCSS in NextJS

Answered

Nile Crocodile posted this in #help-forum

Nile CrocodileOP

2024-04-04T04:57:16.000Z

I am new to NextJS and HTML designer has created HTML using SCSS and I have put that SCSS inside public folder and I am trying to use in my layout something like this

import "./../../public/scss/_bootstrap.scss"; the location is correct .. but it keeps throwing error saying ..

./public/scss/_bootstrap.scss
To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.

Learn more: https://nextjs.org/docs/messages/install-sass

I have already installed this .. this is how my package.json file looks like...

{
  "name": "nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "css-loader": "^6.10.0",
    "less-loader": "^12.2.0",
    "next": "14.1.4",
    "node-sass": "^9.0.0",
    "react": "^18",
    "react-dom": "^18",
    "react-scripts": "^5.0.1",
    "style-loader": "^3.3.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "postcss": "^8",
    "sass": "^1.74.1",
    "sass-loader": "^14.1.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

My layout.tsx file looks like below

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./../../public/scss/_bootstrap.scss";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Dashboard Page",
  description: "Dashboard page Description",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Can someone guide me how can I resolve this ?

Answered by Ray

npm install -g sass

View full answer

123 Replies

@Nile Crocodile I am new to NextJS and HTML designer has created HTML using SCSS and I have put that SCSS inside `public` folder and I am trying to use in my layout something like this `import "./../../public/scss/_bootstrap.scss";` the location is correct .. but it keeps throwing error saying .. ./public/scss/_bootstrap.scss To use Next.js' built-in Sass support, you first need to install `sass`. Run `npm i sass` or `yarn add sass` inside your workspace. Learn more: https://nextjs.org/docs/messages/install-sass I have already installed this .. this is how my `package.json` file looks like... { "name": "nextjs", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "bootstrap": "^5.3.3", "css-loader": "^6.10.0", "less-loader": "^12.2.0", "next": "14.1.4", "node-sass": "^9.0.0", "react": "^18", "react-dom": "^18", "react-scripts": "^5.0.1", "style-loader": "^3.3.4" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.4", "postcss": "^8", "sass": "^1.74.1", "sass-loader": "^14.1.1", "tailwindcss": "^3.3.0", "typescript": "^5" } } My `layout.tsx` file looks like below import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./../../public/scss/_bootstrap.scss"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Dashboard Page", description: "Dashboard page Description", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ); } Can someone guide me how can I resolve this ?