Node.js:Webpack 封裝 CSS、SCSS 成單一 JS 教學(使用 VS Code)

2019/08/19 1,780 1 軟體應用 , 網站技術 , CSS , Sass/SCSS , JavaScript , Node.js , Webpack

《上一篇:Node.js:Webpack 基礎概念與 JS 封裝過程教學(使用 VS Code)》我們已經講到 Webpack 的基礎概念與如何做 JS(JavaScript) 的封裝,這一篇則是要教大家如何用 Webpack 封裝 CSS 與 SCSS,而且最終是跟原來的 JS 一起包裝成單一個 JS 檔!這樣最終的「產品」只要要求一個 JS 檔案就可以同時獲得所有需要的樣式表與腳本了!這個做法可以在不花錢升級主機的情況下讓網站容納更多訪客!

好的,接下來進入正題,首先目錄與基礎配置基本上遵照上一篇文章,因此請先看過上一篇文章再來讀這篇文章唷!我們一開始先修改「src」目錄中的網頁檔案,讓它需要用到樣式表。

▲ index.html 內新增一些方塊與文字,讓它需要使用到樣式表。原始碼:

<!DOCTYPE html>
<html lang="zh_tw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack 測試網頁</title>
    <script src="bundle.js"></script>
</head>
<body>
    <div class="block1">我是方塊一</div>
    <div class="block2">我是方塊二</div>
    我是方塊外的文字
</body>
</html>


▲ 接著在 src 目錄中新增「style.css」,在裡面先設置全局(body)與方塊二(block2)的樣式,最後要儲存起來。

▲ 在 src 目錄中新增「style.scss」,這邊則是要設置方塊一(block1)的樣式,最後記得儲存。

然後我先將 CSS 封裝後跑一次預覽網頁給大家看,最後是 CSS 與 SCSS 一起封裝,會再跑一次預覽網頁看差異。

▲ 這邊要處理 CSS 就一定要安裝「style-loader」和「css-loader」這兩個套件,因此請輸入指令 npm install style-loader css-loader --save 安裝套件,可以到「package.json」查看安裝好後的版本,當然終端機上也會寫。

▲ 接著到「webpack.config.js」中加入以下原始碼(請注意上方「}」後要有「,」):

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

這段代碼可以到 css-loader 官方頁面找到,它是一個模組規則,輸入 .css 樣式表後使用兩個套件進行編譯處理並封裝。


▲ Webpack 進入點「main.js」記得要引入 style.css 樣式表,原始碼:

import './style.css';

接著就可以在下方終端機輸入 npm run build 執行 Webpack 進行封裝作業。


▲ 接著就能運用 VS Code 的擴充「Live Server」跑網頁預覽啦!除了方塊一沒有樣式(因為 SCSS 還沒處理)其他都正常就是成功封裝 CSS 囉!真是太棒了!「Live Server」不用關,最後還要用到。

▲ 接著要來處理 SCSS,需要另外安裝「sass-loader」和「node-sass」這兩個套件,輸入指令 npm install sass-loader node-sass --save 安裝套件,一樣可以到「package.json」查看安裝好後的版本,當然終端機上也會寫。(備註:紅色虛線部分是截圖當下多打的)

▲ 接著到「webpack.config.js」中加入以下原始碼(請注意上方「}」後要有「,」):

      {
        test: /\.scss$/,
        use: [
          'style-loader', // creates style nodes from JS strings
          'css-loader', // translates CSS into CommonJS
          'sass-loader', // compiles Sass to CSS, using Node Sass by default
        ],
      },

這邊可以在 sass-loader 官方文件中找到,它是一個模組規則,輸入 .scss 樣式表後使用三個套件進行編譯處理並封裝。


▲ Webpack 進入點「main.js」記得要引入 style.scss 樣式表,原始碼:

import './style.scss';

接著就可以在下方終端機輸入 npm run build 再次執行 Webpack 進行封裝作業。


▲ 直接到剛剛瀏覽器上的預覽網頁,重新跑 Webpack 後將自動重新整理,方塊一有樣式啦!

▲ 大家可以打開 build 目錄中「bundle.js」,裡面結合了 src 目錄中的所有腳本與樣式表,非常厲害!這張經過加工當作本文首圖啦!

⚠️ 實務上,我們用 SCSS 就不會去使用 CSS 了!但這邊作為教學文章才放一起說!請特別注意!

🗂️ 專案 GitHub:https://github.com/qwe987299/20190819_webpack_project_css_scss

Node.js 系列教學文章

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇