CSS

支持扩展类型: css, pcss, postcss

CSS 资源可以被 JavaScript 或者 HTML 文件导入：

import './index.css'

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

CSS 资源不但可以通过@import语法包含其他依赖，也可以通过url()函数引入图片、字体等。其他通过 @import 导入的 CSS 文件被内联到同一个 CSS 包里，并将 url() 引用重写为其输出文件名。所有文件名都应该与当前 CSS 文件相关联。

/* 导入其他 CSS 文件 */
@import './other.css';
.test {
  /* 引入一个图片文件 */
  background: url('./images/background.png');
}

除了原始的 CSS，其他预编译成 CSS 的语言如 LESS, SASS, 和 Stylus 都是以同样的方式支持。

PostCSS

PostCSS是一个通过各类插件转换 CSS 的工具，如：autoprefixer, Preset Env, 和 CSS Modules。在 Parcel 中通过创建一个名字为.postcssrc (JSON), .postcssrc.js, 或 postcss.config.js的配置文件来配置 PostCSS。

在你的应用中安装下列插件：

yarn add postcss-modules autoprefixer

接着：创建一个文件.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

在plugins对象中 key 指定插件，values 以对象形式被用来定义该插件的配置选项。如果这个插件没有配置，value 设置为true

Autoprefixer, cssnext 和其他工具的可以在.browserslistrc 文件指定浏览器目标为：

> 1%
last 2 versions

在使用最外层的modules键值时，CSS Modules 启用方式稍有不同。这是因为 Parcel 需要对 CSS Modules 提供特殊的支持，因为它们导出了一个对象也要包含在 JavaScript 包中。注意你仍需安装postcss-modules。

使用现有的 CSS 库

要使 CSS Modules 与现有模块正常工作，它们需要在自己的模块的.postcssrc中指定这种支持。

设置 cssnano 压缩配置

Parcel 为了在生产环境构建压缩 css，向 postcss 中添加了cssnano。这里可以通过创建cssnano.config.js 文件自定义配置。

module.exports = {
  preset: [
    'default',
    {
      calc: false,
      discardComments: {
        removeAll: true
      }
    }
  ]
}

帮助我们改善文档

如果有遗漏或者不清楚的地方，请在本站的仓库 提交issue 或者 编辑此页面.