Parcel 與 CSS

CSS

支持擴展類型: css, pcss, postcss

CSS 資源可以被 JavaScript 或者 HTML 文件導入：

import './index.css'

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

CSS 資源不但可以通過@import語法包含其他依賴，也可以通過url()函數(shù)引入圖片、字體等。其他通過 @import 導入的 CSS 文件被內(nèi)聯(lián)到同一個 CSS 包里，并將 url() 引用重寫為其輸出文件名。所有文件名都應(yīng)該與當前 CSS 文件相關(guān)聯(lián)。

/* 導入其他 CSS 文件 */
@import './other.css';

.test {
  /* 引入一個圖片文件 */
  background: url('./images/background.png');
}

除了原始的 CSS，其他預編譯成 CSS 的語言如 LESS, SASS, 和 Stylus 都是以同樣的方式支持。

PostCSS

PostCSS是一個通過各類插件轉(zhuǎn)換 CSS 的工具，如：autoprefixer, Preset Env, 和 CSS Modules。在 Parcel 中通過創(chuàng)建一個名字為.postcssrc (JSON), .postcssrc.js, 或 postcss.config.js的配置文件來配置 PostCSS。

在你的應(yīng)用中安裝下列插件：

yarn add postcss-modules autoprefixer

接著：創(chuàng)建一個文件.postcssrc

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

在plugins對象中 key 指定插件，values 以對象形式被用來定義該插件的配置選項。如果這個插件沒有配置，value 設(shè)置為true

Autoprefixer, cssnext 和其他工具的可以在.browserslistrc 文件指定瀏覽器目標為：

> 1%
last 2 versions

在使用最外層的modules鍵值時，CSS Modules 啟用方式稍有不同。這是因為 Parcel 需要對 CSS Modules 提供特殊的支持，因為它們導出了一個對象也要包含在 JavaScript 包中。注意你仍需安裝postcss-modules。

使用現(xiàn)有的 CSS 庫

要使 CSS Modules 與現(xiàn)有模塊正常工作，它們需要在自己的模塊的.postcssrc中指定這種支持。

設(shè)置 cssnano 壓縮配置

Parcel 為了在生產(chǎn)環(huán)境構(gòu)建壓縮 css，向 postcss 中添加了cssnano。這里可以通過創(chuàng)建cssnano.config.js 文件自定義配置。

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