Sass

Parcel 使用 @parcel/transformer-sass 插件自动支持 Sass 文件。当检测到 .sass 或 .scss 文件时，它将自动安装到你的项目中。

¥Parcel supports Sass files automatically using the @parcel/transformer-sass plugin. When a .sass or .scss file is detected, it will be installed into your project automatically.

编译的 Sass 文件的处理方式也与 CSS 相同，这意味着它是针对你的浏览器目标进行编译的，并且还会应用任何 PostCSS 插件。还可以通过使用 .module.scss 扩展名命名文件来使用 CSS 模块。

¥Compiled Sass files are also processed the same way as CSS, which means it is compiled for your browser targets, and any PostCSS plugins are also applied. CSS modules can also be used by naming your file with the .module.scss extension.

用法示例

¥Example usage

在 HTML 文件中引用 SCSS 文件：

¥Referencing an SCSS file in an HTML file:

<link rel="stylesheet" href="style.scss" />

在 JavaScript 或 TypeScript 中将 Sass/SCSS 文件导入为 CSS 模块：

¥Importing a Sass/SCSS file as a CSS module in JavaScript or TypeScript:

import * as classes from './style.module.scss';

document.body.className = classes.body;

使用 Parcel CLI 直接编译 Sass/SCSS：

¥Directly compiling Sass/SCSS using the Parcel CLI:

parcel build style.scss

配置

¥Configuration

要配置 Sass，请创建 .sassrc 或 .sassrc.json 文件。有关可以在这些配置文件中定义的所有选项的列表，你可以查看官方 Sass 文档

¥To configure Sass, create a .sassrc or .sassrc.json file. For a list of all options that you can define in these configuration files you can have a look at the official Sass documentation