CSS

Parcel 开箱即用地支持 CSS。要添加 CSS 文件，可以在 HTML 文件中使用 <link> 标签引用：

<link rel="stylesheet" href="index.css" />

或在 JavaScript 文件中导入：

import "./index.css";

依赖

CSS 资源可以包含通过 @import 语法引用的依赖，以及通过 url() 函数引用的图像、字体等。

`@import`

@import at 规则可用于将另一个 CSS 文件内联到同一个 CSS 捆绑包中。这意味着在运行时不需要额外的网络请求来加载依赖。

@import "other.css";

引用的文件应该相对于包含 CSS 文件的位置。您还可以使用绝对和波浪号指定符。要从 npm 导入 CSS 文件，请使用 npm: 方案。

@import "npm:bootstrap/bootstrap.css";

当启用 @parcel/resolver-glob 插件时，您还可以使用通配符一次性导入多个 CSS 文件。有关更多详细信息，请参见通配符指定符。

@import "./components/*.css";

`url()`

url() 函数可用于引用文件，例如背景图像或字体。引用的文件将由 Parcel 处理，并且 URL 引用将重写为指向输出文件名。

body {
  background: url(images/background.png);
}

引用的文件应该相对于包含 CSS 文件的位置。您还可以使用绝对和波浪号指定符。还可以使用 data-url: 方案将文件内联为数据 URL。有关更多详细信息，请参见捆绑内联。

.logo {
  background: url("data-url:./logo.png");
}

note：在 CSS 自定义属性中只能使用绝对路径，不能使用相对路径。这是因为自定义属性中的 url() 引用是从使用 var() 的位置解析的，而不是从定义自定义属性的位置解析。这意味着自定义属性可能会根据使用它的文件解析为不同的 URL。为了解决这种歧义，在自定义属性中引用 URL 时使用绝对路径。

/src/index.css:

body {
  /* ❌ 自定义属性中不允许使用相对路径。 */
  --logo: url(images/logo.png);
  /* ✅ 改用绝对路径。 */
  --logo: url(/src/images/logo.png);
}

/src/home/header.css:

.logo {
  background: var(--logo);
}

在上面的示例中，相对路径 images/logo.png 将解析为 /src/home/images/logo.png，而不是您可能期望的 /src/images/logo.png，因为它在 /src/home/header.css 中被引用。无论在哪个文件中使用 var(--logo)，绝对路径 /src/images/logo.png 都能一致地解析。

CSS 模块

默认情况下，从 JavaScript 导入的 CSS 是全局的。如果两个 CSS 文件定义了相同的类名、ID、自定义属性、@keyframes 等，它们可能会发生冲突并相互覆盖。为了解决这个问题，Parcel 支持 CSS 模块。

CSS 模块将每个文件中定义的类视为唯一。每个类名或标识符都会被重命名为包含唯一哈希的名称，并导出一个映射到 JavaScript 以允许引用它们。

要使用 CSS 模块，请创建一个带有 .module.css 扩展名的文件，并从 JavaScript 文件中使用命名空间导入导入它。然后，您可以从模块中访问在 CSS 文件中定义的每个类。

import * as classes from "./styles.module.css";

document.body.className = classes.body;

.body {
  background: skyblue;
}

.body 类将被重命名为唯一的名称，以避免与其他 CSS 文件中的选择器发生冲突。

CSS 模块还适用于其他编译为 CSS 的语言，如 SASS、Less 或 Stylus。使用相应的文件扩展名命名文件，如 .module.scss、.module.less 或 .module.styl。

树摇

使用 CSS 模块还有一个好处，就是使代码中对特定类名的依赖变得明确。这使得未使用的 CSS 类可以自动删除。

CSS 模块树摇示例

如您在上面的示例中所见，只使用了 .button 类，因此未使用的 .cta 类被从编译后的 CSS 文件中删除。

这也适用于其他未使用的 CSS 规则，如 @keyframes 和 @counter-style，以及 CSS 自定义属性（启用 dashedIdents 选项时）。

note：树摇只在您使用命名空间或命名导入引用类时有效。树摇不适用于默认导入。

import styles from "./styles.module.css";

应替换为：

import * as styles from "./styles.module.css";

本地 CSS 变量

默认情况下，类名、ID 选择器以及 @keyframes、@counter-style 和 CSS 网格线和区域的名称都限定在定义它们的模块中。使用项目根目录 package.json 中的 dashedIdents 配置选项，还可以启用 CSS 变量和其他 <dashed-ident> 名称的作用域。

package.json:

{
  "@parcel/transformer-css": {
    "cssModules": {
      "dashedIdents": true
    }
  }
}

启用后，CSS 变量将被重命名，以避免与其他文件中定义的变量名冲突。引用变量使用标准的 var() 语法，Parcel 将更新以匹配本地作用域的变量名。

您还可以使用 from 关键字引用其他文件中定义的变量：

style.module.css:

.button {
  background: var(--accent-color from "./vars.module.css");
}

vars.module.css:

:root {
  --accent-color: hotpink;
}

可以使用 from global 语法引用全局变量，但目前必须在非 CSS 模块文件中定义。

style.module.css:

@import "vars.css";

.button {
  color: var(--color from global);
}

vars.css:

:root {
  --color: purple;
}

相同的语法也适用于使用 <dashed-ident> 语法的其他 CSS 值。例如，@font-palette-values 规则和 font-palette 属性使用 <dashed-ident> 语法定义和引用自定义字体颜色调色板，并且将以与 CSS 变量相同的方式进行作用域和引用。

自定义命名模式

默认情况下，Parcel 会在 CSS 文件中的每个类名和标识符前加上文件名的哈希。您可以在项目根目录的 package.json 中使用 "pattern" 选项配置此命名模式。这接受一个带有占位符的字符串，这些占位符将由 Parcel 填充，允许您添加自定义前缀或调整作用域类的命名约定。

package.json:

{
  "@parcel/transformer-css": {
    "cssModules": {
      "pattern": "my-company-[name]-[hash]-[local]"
    }
  }
}

目前支持以下占位符：

[name] - 不带扩展名的文件基本名称。
[hash] - 完整文件路径的哈希。
[local] - 原始类名或标识符。

note：由于浏览器自动为每个网格模板区域添加以 -start 和 -end 结尾的行名，CSS 网格线名称可能会有歧义。使用 CSS 网格时，您的 "pattern" 配置必须以 [local] 占位符结尾，以使这些引用正常工作。

grid.module.css:

.grid {
  grid-template-areas: "nav main";
}

.nav {
  grid-column-start: nav-start;
}

package.json:

{
  "@parcel/transformer-css": {
    "cssModules": {
      "pattern": "[hash]-[local]"
    }
  }
}

开启全局 css 模块

By default, CSS modules are only enabled for files whose name ends with .module.css. All other CSS files are treated as global CSS by default. However, this can be overridden to enable CSS modules for all source files (i.e. not in node_modules) by configuring @parcel/transformer-css in your project root package.json.

package.json:

{
  "@parcel/transformer-css": {
    "cssModules": true
  }
}

当将配置对象与其他选项一起使用时，请使用"global"选项。

{
  "@parcel/transformer-css": {
    "cssModules": {
      "global": true,
      // ...
    }
  }
}

Note：在 Parcel 的早期版本中，postcss modules用于实现 CSS 模块支持。全局启用 CSS 模块发生在项目的 PostCSS 配置文件中。如果您如上所述启用 CSS 模块，现在可以从您的 PostCSS 配置中删除此插件。

如果这是你使用的唯一 PostCSS 插件，你可以完全删除你的 PostCSS 配置。这可以显著提高构建性能。如果您没有使用任何“postcss 模块”配置选项，您可能会看到有关此问题的警告。

Transpilation

Parcel includes support for transpiling modern CSS syntax to support older browsers out of the box, including vendor prefixing and syntax lowering. In addition, PostCSS is supported to enable custom CSS transformations.

浏览器目标

默认情况下，Parcel 不对旧浏览器的 CSS 语法进行任何转译。这意味着如果您使用现代语法或没有供应商前缀编写代码，Parcel 将输出原样。您可以使用 package.json 中的 browserslist 字段声明应用支持的浏览器。当声明此字段时，Parcel 将相应地转译您的代码，以确保与支持的浏览器兼容。

package.json:

{
  "browserslist": ["> 0.5%", "last 2 versions", "not dead"]
}

当指定 browserslist 时，Parcel 会自动包含 autoprefixer 和 postcss-preset-env 的等效项。这些在 Rust 中实现，比 PostCSS 快得多。如果这些是项目中唯一需要的转换，那么您可能根本不需要 PostCSS。

如果您有一个仅包含上述插件的现有 PostCSS 配置，您可能可以完全删除它。如果您正在使用其他插件，可以删除 autoprefixer 和 postcss-preset-env，同时仅保留自定义插件。这可以显著提高构建性能，因为 Parcel 的内置转译器比 PostCSS 快得多。

有关 Parcel 内置转译支持的更多详细信息，请参见上文。

postcss-import

如果您正在使用 postcss-import，Parcel 已经内置了对 @import 的支持，因此您可以删除此插件。Parcel 的 @import 处理更加高效，并且可以处理更多类型的依赖关系。

其他 PostCSS 插件

对于其他 PostCSS 插件，您可能需要保留它们。但是，Parcel 提供了一种更简单的方法来使用这些插件。您可以直接在 package.json 中配置它们，而不是使用单独的 PostCSS 配置文件。

package.json:

{
  "@parcel/transformer-css": {
    "postcss": {
      "plugins": {
        "postcss-custom-properties": {}
      }
    }
  }
}

预处理器

Parcel 内置支持 SASS、Less 和 Stylus。要使用它们，只需安装相应的依赖并创建带有正确扩展名的文件（.scss、.sass、.less 或 .styl）。

$ npm install -D sass

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

后处理器

Parcel 还支持 PostCSS 作为后处理器。这意味着您可以在 CSS 处理后应用转换。

package.json:

{
  "@parcel/transformer-css": {
    "postcss": {
      "plugins": {
        "autoprefixer": {}
      }
    }
  }
}

自定义语法

如果您想使用自定义 PostCSS 语法（如 postcss-syntax），可以在 package.json 中配置：

package.json:

{
  "@parcel/transformer-css": {
    "postcss": {
      "syntax": "postcss-syntax"
    }
  }
}

禁用 PostCSS

如果您不想使用 PostCSS，可以通过在 package.json 中设置空的 PostCSS 配置来禁用它：

package.json:

{
  "@parcel/transformer-css": {
    "postcss": {
      "plugins": {}
    }
  }
}