2019 iT 邦幫忙鐵人賽

DAY 16

Modern Web

認真學前端開發 - 以 TodoList 為例系列第 16 篇

Day16 - 加入 Bootstrap 的開發環境

2019鐵人賽 webpack bootstrap

傑瑞林

團隊開橋找井

2018-10-31 22:00:30

11440 瀏覽

終於設定好 webpack 現在開發速度可以更快速了，接下來再試著加上 Bootstrap 4 來把網頁弄好看吧

安裝 Bootstrap

可以照著官網的教學我這裡也會照著做

npm install bootstrap --save

單純安裝 bootstrap 會有警告，上面寫著需要 jQuery 和 popper.js@^1.14.3

接下來把他們都安裝起來吧

npm install jquery popper.js --save

在 main.js 中引入 bootstrap

import 'bootstrap';

但 bootstrap 的 css 還是不會被引入

安裝 SASS

這邊有兩種做法

直接裝 bootstrap 壓好的 css

將這一份貼入 webpack.config.js

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

再把 css 貼到 main.js

import 'bootstrap/dist/css/bootstrap.min.css';

就可以使用了

可客製化的作法

 {
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run post css actions
    options: {
      plugins: function () { // post css plugins, can be exported to postcss.config.js
        return [
          require('precss'),
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
}

完整 webpack github

webpack 的 module rules 會去把 test 的 regular expression 找到的靜態檔案讀取進來，然後使用

loader 的套件將檔案轉換好丟給 javascript 引用的地方

舉個例子

假設我的 main.js 中有

import main.scss

loader 的有順序性的

順序是由下至上，如果以 Array 來看是從後面到前面

以現在這個為例的話

執行順序為

sass-loader
postcss-loader
css-loader
style-loader

sass-loader 會將 import main.scss 丟給 node-sass compile 然後

postcss-loader 將 sass-loader 處理完的 css 做 browser 相容性的機制做輸出

css-loader 會將 postcss-loader 處理過的 css 做 css 裡引用靜態圖的處理可參考css-loader

最後 style-loader 會將前面整理好的 css 用 <style> 寫到頁面上

回到 Bootstrap 設定

設定好 sass 檔案

touch styles/main.scss

在 main.scss 加上

@import "custom";
@import "~bootstrap/scss/bootstrap";

然後在 main.js 加上

import './styles/main.scss';

接下來會發現 dev server 壞掉了，原因是需要安裝一些 loader

npm install -D sass-loader precss autoprefixer postcss-loader css-loader style-loadernode-sass

如果用

<div class="container">
  把 todo 包起來
</div>

會看到呈現不一樣了！

把 style 搬進 main

因為 webpack 現在會做打包 css 和 sass 的事情了
所以放在 html 中的 css 可以轉到 project 中
這樣 html 就乾淨了許多

<!DOCTYPE html>
<html lang="zhTW">

<head>
  <meta charset="UTF-8">
</head>

<body>
    <div class="container">
        <div class="header">
            <h2>待辦清單</h2>
            <input type="text" id="todo-input" placeholder="待辦事項">
            <button id="addTodo">新增</button>
        </div>
        <ul id="todo-list">
        </ul>
    </div>
  </body>
</html>