1.配置 scss Loader
SCSS 可以讓你用更靈活的方式寫 CSS。 它是一種 CSS 預處理器，語法和 CSS 相似，但加入了變量、邏輯、等編程元素。SCSS 又叫 SASS，區別在於 SASS 語法類似 Ruby，而 SCSS 語法類似 CSS，對於熟悉 CSS 的前端工程師來說會更喜歡 SCSS。
使用 SCSS 可以提升編碼效率，但是必須把 SCSS 源代碼編譯成可以直接在瀏覽器環境下運行的 CSS 代碼。 SCSS 官方提供了多種語言實現的編譯器，由於本書更傾向於前端工程師使用的技術棧，所以主要來介紹下 node-sass。
node-sass 編譯器核心模塊是由 C++ 編寫，再用 Node.js 封裝了一層，以供給其它 Node.js 調用。
新建一個項目
|-- package.json
|-- src
| | `-- common.js
| | `-- index.html
| | `-- main.scss
| `-- main.js
`-- webpack.config.js
package.json
{
"name": "testcssloader",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "liujun",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6"
}
}
1.scripts 屬性裏編寫了3個腳本：其中 dev 對應的腳本是 構建測試版；其中 build對應的腳本是 構建發佈版
2.開發依賴了style-loader css-loader
node-sass sass-loaderwebpack webpack-cli
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
test: /\.scss$/,
// 注意:use 的別名 是 loaders。下面3個加載的執行順序是 3 2 1
use: [
// 1.不用傳遞參數可以簡寫
'style-loader',
{
loader: 'css-loader',
// 2.給css-loader傳遞參數
options: {
url: true,
import: true
}
},
// 3.使用sass加載器
'sass-loader'
],
}
]
}
};
use接收一個數組，數組中可以存放字符串和對象，並且use的別名是 loaders。上面的use接收了3個加載器，加載器執行的順序是：sass-loader -> css-loader -> style-loader
main.scss
// 這裏使用 scss 的語法，定義了一個變量
$color: pink;
body {
background-color: $color;
}
main.js
// 1.通過 CommonJS 規範導入 showHelloWorld 函數
const showHelloWorld = require('./common.js');
// 2.執行 showHelloWorld 函數
showHelloWorld('Webpack的安裝和使用');
// 3.通過 CommonJS 規範導入 SCSS 模塊
require('./main.scss');
index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--導入 Webpack 輸出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>
本地安裝 webpack 和 用到的loader
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev // 把 scss 編譯成 css
npm install [email protected] --save-dev // 加載 scss 文件，把scss文件轉成commonjs模塊
在項目的根目錄，執行腳本構建項目
npm run dev
打包後輸出的結果
|-- dist
| |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
| |-- common.js
| |-- index.html
| |-- main.scss
| `-- main.js
`-- webpack.config.js
打包之後的 index.html 文件的部分內容：
<html><head>
<meta charset="UTF-8">
<style type="text/css">body {
background-color: pink; }
</style></head>
<body>
<div id="app"></div>
<!--導入 Webpack 輸出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body></html>
總結：
上面webpack.config.js配置中的use通過正則 /\.scss$/ 匹配所有以 .scss 爲後綴的 SCSS 文件，再分別使用3個 Loader 去處理。具體處理流程如下：
- 通過 sass-loader 把 SCSS 源碼轉換爲 CSS 代碼，再把 CSS 代碼交給 css-loader 去處理。
- css-loader 會找出 CSS 代碼中的
@import和url()這樣的導入語句，告訴 Webpack 依賴這些資源。同時還支持 CSS Modules、壓縮 CSS 等功能。處理完後再把結果交給 style-loader 去處理。 - style-loader 會把 CSS 代碼轉換成字符串後，注入到 JavaScript 代碼中去，通過 JavaScript 去給 DOM 增加樣式。如果你想把 CSS 代碼提取到一個單獨的文件而不是和 JavaScript 混在一起，可以使 ExtractTextPlugin 插件。