Next.js Discord

Discord Forum

scss not found

Unanswered
Hutton's Vireo posted this in #help-forum
Open in Discord
Hutton's VireoOP
Hi everyone,

i try to import my main scss file on the layout.js one,

but i got the missing module error, i sreaching some helps on stack Overflows, installs some dependencies but nothing work

there's the packages.json
{
  "name": "geckocooking",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/babel-plugin": "^11.13.5",
    "@emotion/cache": "^11.14.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
    "@heroui/card": "^2.2.25",
    "@heroui/system": "^2.4.23",
    "@heroui/theme": "^2.4.23",
    "@mui/icons-material": "^7.3.5",
    "@mui/material": "^7.3.5",
    "@mui/system": "^7.3.5",
    "@phosphor-icons/react": "^2.1.10",
    "@prisma/client": "^6.18.0",
    "@radix-ui/react-slot": "^1.2.3",
    "bcryptjs": "^3.0.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "css-loader": "^7.1.2",
    "embla-carousel-react": "^8.6.0",
    "framer-motion": "^12.23.22",
    "jose": "^6.1.0",
    "jsonwebtoken": "^9.0.2",
    "jwt-sign": "^0.1.0",
    "lucide-react": "^0.544.0",
    "mongoose": "^8.19.2",
    "next": "^16.0.1",
    "next-auth": "^4.24.13",
    "nookies": "^2.5.2",
    "nuxt-phosphor-icons": "^2.3.2",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "style-loader": "^4.0.0",
    "tailwind-merge": "^3.3.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-decorators": "^7.28.0",
    "@babel/preset-env": "^7.28.3",
    "@eslint/eslintrc": "^3",
    "eslint": "^9",
    "eslint-config-next": "15.3.2",
    "prisma": "^6.18.0",
    "sass": "^1.94.2",
    "sass-embedded": "^1.93.3",
    "sass-loader": "^16.0.6",
    "tailwindcss": "^4",
    "tw-animate-css": "^1.4.0",
    "webpack": "^5.103.0"
  },
  "prisma": {
    "seed": "node prisma/seed.js"
  }
}


the relative path is "src\sass\main.scss"

5 Replies

@Hutton's Vireo Hi everyone, i try to import my main scss file on the layout.js one, but i got the missing module error, i sreaching some helps on stack Overflows, installs some dependencies but nothing work there's the packages.json { "name": "geckocooking", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/babel-plugin": "^11.13.5", "@emotion/cache": "^11.14.0", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@heroui/card": "^2.2.25", "@heroui/system": "^2.4.23", "@heroui/theme": "^2.4.23", "@mui/icons-material": "^7.3.5", "@mui/material": "^7.3.5", "@mui/system": "^7.3.5", "@phosphor-icons/react": "^2.1.10", "@prisma/client": "^6.18.0", "@radix-ui/react-slot": "^1.2.3", "bcryptjs": "^3.0.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "css-loader": "^7.1.2", "embla-carousel-react": "^8.6.0", "framer-motion": "^12.23.22", "jose": "^6.1.0", "jsonwebtoken": "^9.0.2", "jwt-sign": "^0.1.0", "lucide-react": "^0.544.0", "mongoose": "^8.19.2", "next": "^16.0.1", "next-auth": "^4.24.13", "nookies": "^2.5.2", "nuxt-phosphor-icons": "^2.3.2", "react": "^19.2.0", "react-dom": "^19.2.0", "style-loader": "^4.0.0", "tailwind-merge": "^3.3.1" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-decorators": "^7.28.0", "@babel/preset-env": "^7.28.3", "@eslint/eslintrc": "^3", "eslint": "^9", "eslint-config-next": "15.3.2", "prisma": "^6.18.0", "sass": "^1.94.2", "sass-embedded": "^1.93.3", "sass-loader": "^16.0.6", "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "webpack": "^5.103.0" }, "prisma": { "seed": "node prisma/seed.js" } } the relative path is "src\sass\main.scss"
Jerico Aragon
please share your project architecture.
Hutton's VireoOP
 GECKOCOOKING
│
├── .next
├── .vscode
├── actions
├── api-postgres
├── global
├── models
├── node_modules
├── postgres_data
├── prisma
├── public
│
├── src
│   ├── app
│   ├── components
│   ├── lib
│   ├── node_modules
│   └── sass
│       ├── abstracts
│       ├── base
│       ├── components
│       ├── layout
│       ├── pages
│       └── main.scss
│
├── .dockerignore
├── .env
├── .gitignore
├── components.json
├── docker-compose.yml
├── dockerfile
├── eslint.config.mjs
├── jsconfig.json
├── middleware.js
├── next.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tailwind.config.js
Hutton's VireoOP
Hello, I just correct it

Thank for taking time to help me
Jerico Aragon
Welcome