简体   繁体   English

可以在不安装 sass 的情况下使用 SCSS 文件吗?

[英]Able to use SCSS files without installing sass?

I'm currently using NEXT.js for my project.我目前正在为我的项目使用 NEXT.js。

Normally, I first do yarn add sass then I use [name].module.scss files.通常,我先做yarn add sass然后我使用[name].module.scss文件。 Therefore there should be no errors using scss files.因此使用scss文件应该没有错误。

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 .即使我没有yarn add sass ,我也能够使用scss文件以及 scss 中使用的scss @use, @include语法。

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 .我知道 CSS Preprocessor(SASS) 不能直接在浏览器中工作,应该转换成纯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!我不知道如何在不安装sass的情况下使用它!

Downloading and installing packages globally was the answer.答案是在全球范围内下载和安装软件包。

In Nov 30, I installed sass globally. 11 月 30 日,我在全局安装了sass

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.因此我能够在不安装 sass 的情况下使用它。

However, If you are working with someone, you must include the specific dependency on package.json to ensure libraries working properly.但是,如果您正在与某人合作,则必须包含对 package.json 的特定依赖性以确保库正常工作。

npmjs - global installing npmjs - 全局安装

VS Code has a built in Sass Compiler Extension. VS Code 有一个内置的 Sass 编译器扩展。

Perhaps you have installed the extension unknown to you可能你安装了你不知道的扩展

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM