崴貓小威少の世界0w0: SCSS, SASS的使用和Webpack結合教學

參考文章

👄SCSS

如果想要查看完整的檔案內容，可以將該提交中的檔案名稱指定給 git show 命令。

在此情況下，檔案名稱是 public/index.html。

步驟 1: 安裝 SCSS 編譯器

npm install sass

步驟 2: 撰寫 SCSS 文件

步驟 3: 編譯 SCSS 文件為 CSS

👉一次性編譯：將 input.scss 檔編譯成 output.css

npx sass input.scss output.css

👉watch 模式：每次存檔均會自動進行編譯

sass --style=compressed mais.scss main.css

👉壓縮功能：通常是在開發最後才會執行

sass --style=compressed mais.scss main.css

當使用SASS時，應將文件副檔名更改為.sass，

1. 並且不需要使用大括號 {} 或分號 ;。

2. Sass使用縮進和空白行來區分程式碼區塊。

>> SASS和SCSS幾乎一樣，就差在沒有使用{}和;。

步驟 4: 在 HTML 文件中引入 CSS 文件

👄Webpack

Webpack 是一個非常強大且廣泛使用的前端打包工具，具有許多常用的功能。以下是一些 Webpack 常見的功能和用途：

模組打包： Webpack 可以將多個前端資源（如 JavaScript、CSS、圖片等）視為模組，並將其打包成較小、更有效的 bundle 檔案，以加速網站載入速度。
載入器 (Loaders)：載入器允許 Webpack 處理非 JavaScript 檔案。例如，使用 babel-loader 可以將 ES6/ES7 JavaScript 轉換為瀏覽器支持的 JavaScript，使用 sass-loader 可以將 SCSS/Sass 檔案轉換為 CSS。
插件 (Plugins)： Webpack 的插件系統提供了許多功能強大的插件，如 HtmlWebpackPlugin 可以自動生成 HTML 文件，MiniCssExtractPlugin 可以將 CSS 提取成單獨的文件，CleanWebpackPlugin 可以在每次建構前清理輸出目錄等。
熱模組替換 (Hot Module Replacement, HMR)：在開發模式下，Webpack 提供 HMR 功能，可以實現在應用程式運行時，無需刷新整個頁面，即時更新修改過的模組，加快開發速度。
代碼分割 (Code Splitting)： Webpack 可以將程式碼分割成更小的塊，使得網站在運行時只載入必要的部分，減少初始加載時間。
靜態資源管理： Webpack 可以處理靜態資源，如圖片、字型等，並將它們優化、壓縮，或將小圖片轉換為 Data URLs。
多環境配置：可以根據不同環境（開發、生產等）提供不同的設定，如使用不同的插件、載入器、變數替換等。
代碼壓縮和優化：在生產模式下，Webpack 可以壓縮 JavaScript、CSS 和其他資源，並且可以進行樹搬移動、死代碼消除等優化操作。
擴展性和自定義性： Webpack 可以通過配置文件進行高度定制，以滿足各種特定的項目需求，並支持許多自定義插件和載入器。

👉運行 Webpack 打包：

npx webpack --mode development
npx webpack --mode production

--mode 它是用來指定打包模式的一個選項。Webpack 支援不同的模式，包括 development 和 production。

--mode development：這個選項告訴 Webpack 以開發模式進行打包，生成的 bundle 將保留原始的程式碼結構、不進行壓縮和優化等操作，方便開發者進行調試和開發。

--mode production：這個選項告訴 Webpack 以生產模式進行打包，生成的 bundle 將進行壓縮、優化等操作，以減少檔案大小並提升效能。

👄Webpack 和SCSS同時結合

// webpack.config.js//

module: {
rules: [
{
test: /\.scss$/, // 匹配 .scss 檔案
use: [
'style-loader', // 將編譯後的 CSS 以 <style> 插入到 HTML 文件中
'css-loader', // 解析 CSS 檔案後，將其轉換為 CommonJS 模塊
'sass-loader' // 將 SCSS 轉換為 CSS
]
}
]
},

src/index.js

import './styles.scss'; // 引入 SCSS 檔案

.vue檔案若要能夠從灰色變彩色，請加入這個套件extension。

Vue Language Features (Volar)

npm uninstall vue-template-compiler 把vue-template-compiler刪掉速度變快很多。

"sass": "^1.69.5",

"babel-loader": "^9.1.3",

"css-loader": "^6.8.1",

"html-webpack-plugin": "^5.6.0",

"sass-loader": "^13.3.3",

"style-loader": "^3.3.3",

"vue": "^3.3.13",

"vue-loader": "^16.8.3",

"webpack": "^5.89.0",

"webpack-cli": "^5.1.4"

崴貓小威少の世界0w0

崴貓的連結

2023年12月29日星期五

SCSS, SASS的使用和Webpack結合教學

👄SCSS

步驟 1: 安裝 SCSS 編譯器

步驟 2: 撰寫 SCSS 文件

步驟 3: 編譯 SCSS 文件為 CSS

步驟 4: 在 HTML 文件中引入 CSS 文件

👄Webpack

👉運行 Webpack 打包：

--mode 它是用來指定打包模式的一個選項。Webpack 支援不同的模式，包括 development 和 production。

--mode development：這個選項告訴 Webpack 以開發模式進行打包，生成的 bundle 將保留原始的程式碼結構、不進行壓縮和優化等操作，方便開發者進行調試和開發。

--mode production：這個選項告訴 Webpack 以生產模式進行打包，生成的 bundle 將進行壓縮、優化等操作，以減少檔案大小並提升效能。

👄Webpack 和SCSS同時結合

module: {
rules: [
{
test: /\.scss$/, // 匹配 .scss 檔案
use: [
'style-loader', // 將編譯後的 CSS 以 <style> 插入到 HTML 文件中
'css-loader', // 解析 CSS 檔案後，將其轉換為 CommonJS 模塊
'sass-loader' // 將 SCSS 轉換為 CSS
]
}
]
},

沒有留言:

張貼留言

崴貓的連結

2023年12月29日 星期五

SCSS, SASS的使用和Webpack結合教學

👄SCSS

步驟 1: 安裝 SCSS 編譯器

步驟 2: 撰寫 SCSS 文件

步驟 3: 編譯 SCSS 文件為 CSS

步驟 4: 在 HTML 文件中引入 CSS 文件

👄Webpack

👉運行 Webpack 打包：

--mode 它是用來指定打包模式的一個選項。Webpack 支援不同的模式，包括 development 和 production。

--mode development：這個選項告訴 Webpack 以開發模式進行打包，生成的 bundle 將保留原始的程式碼結構、不進行壓縮和優化等操作，方便開發者進行調試和開發。

--mode production：這個選項告訴 Webpack 以生產模式進行打包，生成的 bundle 將進行壓縮、優化等操作，以減少檔案大小並提升效能。

👄Webpack 和SCSS同時結合

module: { rules: [ { test: /\.scss$/, // 匹配 .scss 檔案 use: [ 'style-loader', // 將編譯後的 CSS 以 <style> 插入到 HTML 文件中 'css-loader', // 解析 CSS 檔案後，將其轉換為 CommonJS 模塊 'sass-loader' // 將 SCSS 轉換為 CSS ] } ] },

沒有留言:

張貼留言

2023年12月29日星期五

module: {
rules: [
{
test: /\.scss$/, // 匹配 .scss 檔案
use: [
'style-loader', // 將編譯後的 CSS 以 <style> 插入到 HTML 文件中
'css-loader', // 解析 CSS 檔案後，將其轉換為 CommonJS 模塊
'sass-loader' // 將 SCSS 轉換為 CSS
]
}
]
},