在webpack中使用css

因為在webpack環境中只認得javascript，所以必須要安裝css-loader 來把 css 語法轉成 webpack 看的懂的 javascript語法，而style-loader 是用來把 webpack 處理好的 css 樣式注入在 style tag 裡。

安裝css-loader與style-loader：

npm install --save-dev css-loader style-loader

接著在webpack.config.js裡新增規則：

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  }

loader 的執行順序都是由後往前執行，所以會先執行 css-loader，再執行 style-loader。

然後在 index.js 中引入 css，這樣 css會自動被編入 html中，html檔案中不需再引入 css。

import '../css/index.css'

執行npm run deploy後我們可以看見webpack把css幫我們引入在style tag裡：