Home > Net >  Able to use SCSS files without installing sass?
Able to use SCSS files without installing sass?

Time:12-18

I'm currently using NEXT.js for my project.

Normally, I first do yarn add sass then I use [name].module.scss files. Therefore there should be no errors using scss files.

However, I just started my project. Even though I didn't yarn add sass, I was able to use scss files and also @use, @include syntax used in scss.

I'm curious about how this can happening. I have known that CSS Preprocessor(SASS) cannot work in browsers directly, and should've converted into pure css.

Here's the code I'm working on.

@use 'styles/color.scss';
@use 'styles/responsive.scss';

.mainContainer {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;

  color: color.$MAIN_GRAY;

  @include responsive.after(DESKTOP) {
    color: color.$MAIN_BLACK;
  }
}
import styles from './layout.module.scss';

const Layout = ({ children }) => {
  return <main className={styles.mainContainer}>{children}</main>;
};

export default Layout;
// package.json

{
  "name": "29cm",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.0.7",
    "@types/node": "18.11.16",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "next": "13.0.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.4"
  }
}

I have no idea how I can use sass without installing it!

CodePudding user response:

VS Code has a built in Sass Compiler Extension.

Perhaps you have installed the extension unknown to you

CodePudding user response:

Downloading and installing packages globally was the answer.

In Nov 30, I installed sass globally.

npm install -g sass

Installing a package globally allows you to use the code in the package as a set of tools on your local computer.

Therefore I was able to use sass without installing it.

However, If you are working with someone, you must include the specific dependency on package.json to ensure libraries working properly.

npmjs - global installing

  • Related