Parcel - CSS asset

Parcel 支援 CSS 文件的處理，可在 CSS 中透過 @import 載入另一個 CSS。

...
@import './background.css';
...

也可以透過 url 函式引用圖片、字型。

... 
background-image: url('../images/Profile.jpg');
...

像是下面這邊筆者創建了個簡單的範例，建立了個 index.html，裡面引用了 index.css。

<html>
  <head>
    <link rel="stylesheet" href="./style/index.css">
  </head>
  <body>
  </body>
</html>

1.png

index.css 內透過 @import 引用了 background.css 檔，用 url 方法使用指定圖片設定背景圖片。

@import './background.css';

body
{ 
  background-image: url('../images/Profile.jpg');
  background-repeat:no-repeat;
  background-position: center;
}

2.png

3.png

background.css 設定背景為指定顏色。

body {background-color: coral;}

4.png

範例準備好後調用 Parcel 命令建置並啟用服務。

5.png

Parcel 解析網站後會將需要的檔案處理後移至輸出目錄。

6.png

連至啟動的服務網址，可看到網站正確的被運行。

7.png