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.