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!
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.
VS Code has a built in Sass Compiler Extension.
Perhaps you have installed the extension unknown to you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.