🚫💋🚫 NO sass/.scss [3:51am]

[frankcollins3]

attemping to do: set up SASS with new Next version release

error: 👍 water app in react and express:

app/src/main/: main/main.css (styles) main/main.Tsx (component)

main/main.Tsx: 👍 import "./main.css" // just have to go back 1 directory which would be the component scope that houses the .Tsx and .CSS files

---

Next.js && SCSS: 👎 1: that same organization system of having the component corresponding CSS be within the component directory 1.1: import "./main.css"

"baseUrl": "./" tried both ways: 👎 import styles from "./main.scss" 👎 import styles from "app/main/main.scss

[frankcollins3]

video better details problem... as can be seen therein:

1: app/main/page clears the red squiggles from displaying error message saying: 'styles' is declared but its value is never read.ts(6133) Cannot find module 'app/main/main.scss' or its corresponding type declarations.ts(2307)

2: app/main/main.scss // retains those above error messages as if it doesn't exist same so for "./main.scss" with "baseUrl": off

https://github.com/frankcollins3/Next-Water-App/assets/73137934/473cbd11-8cca-4e3c-845d-5e2eb916b1a9

if this works my only guess is that main.scss and using styles from "app/main/main.scss" sass now has new behavior where importing styles is like index it automatically reads the file within that mkdir

// Used Next.js once and did use Sass but that app's directory structure:

styles/ familytree/ familytree.scss

There is the main styles director that comes with that 13.0 version of Next.js An additional directory that correspondent to the /pages/file.tsx (in this case /pages/familytree.tsx) the styles directory. Also within a few of those directories would be a familytree.js file (styled components) all worked fine.

// bookmarking a fondness for:

component/ component.css | component.scss component.tsx

[4:07am]

[frankcollins3]

WOW forgot about Main.module.scss surprised chatGPT didn't correct me on that. // I could be wrong though, glad it's only been <30 mins [4:13am]

we can see pictured above that: "main.scss": improper in syntax, still renders the sass logo probably because of file extension

[4:17am]

[frankcollins3]

squiggle lines move and error messages change:

" Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'.ts(2559) index.d.ts(1935, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>' (property) HTMLAttributes.style?: CSSProperties | undefined No quick fixes available "

[4:18pm]

[frankcollins3]

chatGPT scooped the groundball. className* not style [4:20am] ...

[frankcollins3]

overcame the import syntax problem. Now there is compatibility combat clogging the compiler

[4:31am]

[frankcollins3]

👎 npm i sass 👎 👎 npm i -g sass [4:34am]

[frankcollins3]

👎 node sass. no success.

  "dependencies": {
    "@types/node": "20.4.0",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "autoprefixer": "10.4.14",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.9",
    "next": "13.4.9",
    "node-sass": "^9.0.0",
    "postcss": "8.4.25",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.63.6",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.6"
  }

[4:40am]

[frankcollins3]

several are suggesting node-sass and mentioning the official Next.js provided steps: npm i -g sass doesn't work. https://github.com/vercel/next.js/issues/12263 [4:41am]

dev dependency install no good either. npm install --save-dev sass [4:44am]

this is exactly why react version of this app didn't have sass because had to learn GraphQL and few other libs 👎 no sense wasting this time when I"ve used sass in a project before for Next 13.0

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

[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/Users/medium/Desktop/next-water-app/.next/cache/webpack/client-development-fallback/0.pack.gz_' -> '/Users/medium/Desktop/next-water-app/.next/cache/webpack/client-development-fallback/0.pack.gz' - wait compiling... - error ./app/main/Main.module.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. [4:47am]

[frankcollins3]

chatGPT suggested this "npx next clean" command which did nothing. ➜ next-water-app git:(main) ✗ npx next clean

• error Invalid project directory provided, no such directory: /Users/medium/Desktop/next-water-app/clean ➜ next-water-app git:(main) ✗ [4:49am]

[frankcollins3]

cache clean --force and friends. Had to get rid of the Next folder

problem persisted until package-lock.json was deleted as well.

30 mins deleting node_modules. uninstalling dependencies. reinstalling globally or locally as --save-dev

[5:01am]