iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
1
Modern Web

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

Day16 - 加入 Bootstrap 的開發環境

  • 分享至 

  • xImage
  •  

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

安裝 Bootstrap

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

npm install bootstrap --save

單純安裝 bootstrap 會有警告,上面寫著需要 jQuerypopper.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 來看是從後面到前面

以現在這個為例的話

執行順序為

  1. sass-loader
  2. postcss-loader
  3. css-loader
  4. 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>

結語

今天開發安裝了 bootstrap4 可以試試把 style 改成 bootstrap 的樣式

明天會來將網頁套上 bootstrap 的樣式,那明天見囉

附上今天改動的程式碼day16


上一篇
Day15 - Webpack [part3][開發模式]
下一篇
Day-17 把 TodoList 套上 Bootstrap4 吧!
系列文
認真學前端開發 - 以 TodoList 為例30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言