Question

支援的副档名：css、pcss 及 postcss

CSS 资源可于 JavaScript 或 HTML 档案中被汇入：

import './index.css';

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

CSS 资源也能透过 @import 语法引用相依档案，或用 url() 汇入影像、字型档等等的档案。

其他透过 @import 引用的 CSS 档案将会被插入于同一个 CSS bundle 里，而使用 url() 引入的档案则会被改写为实际档案输出路径。

所有档名都必须使用相对于目前 CSS 档案的路径。

/* 汇入另一个 CSS 档 */
@import './other.css';

.test {
  /* 引用一张图档 */
  background: url('./images/background.png');
}

除了纯 CSS 以外，Parcel 也支援其他编译至 CSS 的语言如 LESS、SASS 及 Stylus 等。它们的执行方式与纯 CSS 相同。

PostCSS 是款可以转换 CSS 的外挂，它有如 autoprefixer、Preset Env 和 CSS Modules 等等的外挂。

若要在 Parcel 中使用 PostCSS，你需要建立下列其中一个设定档：.postcssrc (JSON)、.postcssrc.js 或 postcss.config.js。

在你的 app 中安装外挂：

yarn add postcss-modules autoprefixer

接着建立 .postcssrc：

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

使用外挂时需于 plugins 内新增一个属性，外挂选项则为此属性的值，并以物件形式设定。若外挂无需设定，将属性值设定为 true 即可。

针对 Autoprefixer、cssnext 及其他工具的支援浏览器可在 .browserslistrc 中设定：

> 1%
last 2 versions

在指定最外层的 modules 时，CSS 模组启用方式稍有不同。因 CSS 模组会汇出一个需要被引入在 JavaScript bundle 中的物件，Parcel 需要对此特别处理。 需要注意的是，你仍须在专案中安装 postcss-modules。

使用现有的 CSS 函式库

为使现有的 CSS 模组可以正常运作，需要特别在它们的 .postcssrc 指定支援程度。

设定 cssnano CSS 压缩

Parcel 会将 cssnano 加入至 PostCSS 以便在正式编译中对 CSS 进行压缩。若需设定 cssnano 可以建立 cssnano.config.js 档案：

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