iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
2
Modern Web

React 30天系列 第 9

Day 09-[番外]繽紛世界(CSS / Autoprefixer / SCSS with Parcel)

前情提要:
昨天介紹了Form所用到的components分為Controlled Components和Uncontrolled Components。然後也寫了一個使用formik和yup的表單應用加速我們的開發流程。

就在昨天,終於我受不了這黑白的世界,默默加上了inline styles。今天我們來調整一下我們的開發環境吧。

CSS

如果是直接寫css的話,Parcel真的非常方便,不需要安裝什麼套件,直接用就可以,用法很簡單
比如說我在src/styles新建一個index.css檔案,裡面import了button.css,也放了一張background

/* 引入其他 CSS 文件 */
@import './button.css';

.title {
  font-size: 16px;
  color: skyblue;
  padding: 0 5px;
}

.image-background {
  /* 引用圖片 */
  background: url('../static/image.png');
  width: 260px;
  height: 232px;
}

在js這邊,我們只需要匯入檔案的相對位置就可以成功抓取css樣式了

import './styles/index.css';

實際會看到的畫面如下:
我們可以看到import的button.css已經整併到同個檔案了
https://ithelp.ithome.com.tw/upload/images/20181016/20111595tUD4NmCZcg.png

Autoprefixer

接著我們再來處理autoprefixer吧!有的css屬性在不同瀏覽器需要加上前綴(prefix)以確保我的寫的css在每個瀏覽器都能運行順暢,autoprefixer就是免除我們煩惱的小幫手!

那要怎麼使用autoprefixer呢?我們必須得透過PostCSS的幫忙,PostCSS是一個使用插件轉換CSS的工具,但我們這邊不用像webpack一樣安裝postcss-loader,因為Parcel套餐也包好了,所以直接安裝我們需要使用的plugin autoprefixer吧!

yarn add autoprefixer

根據Parcel,我們需要新建一個.postcssrc檔案貼下設定:
autoprofixer內可加入一些其他設定,這邊加上瀏覽器的相容性設定

{
  "plugins": {
    "autoprefixer": {
      "browsers": [
        ">1%",
        "last 2 versions",
        "not ie < 10"
      ]
    }
  }
}

我在index.js的App component調整一下JSX把title和button的外層用block包起來

const App = () => {
  return (
    <div>
      <div className="block">
        <span className="title">Hello World!</span>
        <button className="button">按鈕</button>
      </div>
      <div className="image-background"></div>
    </div>
  );
};

接著在index.css增加:

/* --- */
.block {
  display: flex;
  align-items: center;
}
/* --- */

預期我們的css透過autoprefixer轉換可以變成這樣:

.block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

然後真的跑完之後發現,世界依然和平,css依然無動於衷,半點反應都沒有...

人生最慘的就是有改進的心卻沒有管道,通常terminal可能會跟你提一下:欸~錯誤不能跑,錯誤是什麼#@$$@
然後我們就可以循線追查哪邊出包,但這次就跟希望我佛係頓悟一樣沒有任何訊息。
貪圖方便使用parcel的我開始想著...是不是因為不用主流webpack所以出包呵呵活該。
在parcel的github issues查訪看看有沒有跟我一樣的苦主,看到了這篇
結論是bug,但有變通的方法,把postcss的plugin設定寫在package.json上,寫法如下:

{
...
  "scripts": {
    ...
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          ">1%",
          "last 2 versions",
          "not ie < 10"
        ]
      }
    }
  }
}

設定完成後在terminal執行yarn start
https://ithelp.ithome.com.tw/upload/images/20181016/20111595ZoWkknoHdf.png

功德圓滿!我們順利設定完autoprefixer
希望在不久的將來後這個bug可以修復~

SCSS

SASS(Syntactically Awesome Stylesheets)是CSS語法的一種擴充。讓我們在可以使用變量、巢狀規則(nested)、mixins、import等功能。而SASS的語法又分成舊的SASS和新的SCSS兩種。

差別就在於分號和大括號,SCSS長得比較像一般的CSS語法需要括號和分號,而SASS則是用縮排取代括號(詳情可參考Sass Basics)。
如果要透過Parcel編譯SCSS也很容易,首先安裝sass

npm install sass

然後import scss檔案就完成了!(欸?!)
接著我們把剛剛寫好的index.css改成index.scss調整一下內容
(記得index.js內import的檔名也要調整成scss)

// ...
.title {
  font-size: 16px;
  color: skyblue;
  padding: 0 5px;
  &:hover {
    color: red;
  }
}
// ...

上方的scss我們在title上加上hover效果,執行yarn start後得到畫面如下:
https://ithelp.ithome.com.tw/upload/images/20181016/20111595Bwo5uZTJI2.png

可以看到Parcel已經幫我們把scss轉成css,而包在title內的hover設定也轉成css語法。


今日總結:
今天簡單地介紹CSS、Autoprefixer和SCSS在Parcel如何使用。
Parcel在個人開發上是蠻方便的,除了PostCSS的Autoprefixer外完全不用做任何設定,但產生問題的時候也相對麻煩,看來大型專案還是用webpack比較保險,資源也比較豐富XD

明天再來就這幾天的內容做個小練習吧!


上一篇
Day 08-淚水交織的表單(Form)
下一篇
Day 10-todos小練習
系列文
React 30天30

尚未有邦友留言

立即登入留言