本次內(nèi)容我們將學(xué)習(xí)使用webpack如何處理css、less、sass、scss等樣式資源
介紹
webpack本身是不能識別樣式資源的，所以我們需要借助loader包來幫助webpack解析樣式資源
我們找loader都應(yīng)該去官方文檔中查找對應(yīng)的loader，然后學(xué)習(xí)使用。
官方文檔找不到的話，可以從社區(qū)、GitHub中搜索查詢
css-loader | webpack 中文文檔
一、處理Css資源
1、下載對應(yīng)包
npm i css-loader style-loader -D
Ps:注意需要下載兩個(gè)loader包
2、功能介紹
● css-loader：負(fù)責(zé)將css文件編譯成webpack能識別的模塊
● style-loader：會動態(tài)創(chuàng)建一個(gè)style標(biāo)簽，里面放置webpack中引入的css模塊內(nèi)容
此樣式就會以style標(biāo)簽的形式在頁面上生效
3、創(chuàng)建CSS資源
在根目錄/src/css/index.css，中創(chuàng)建文件夾及文件，然后隨便寫一點(diǎn)css樣式
.box1 {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
4、配置
● 在src/main.js中引入前面創(chuàng)建的css文件
import count from "./js/count";
import sum from "./js/sum";
// 要想webpack打包該資源，必須引入該資源
import "./css/index.css"
css文件只需引入不需要調(diào)用和起函數(shù)名
● 在根目錄下的 webpack.config.js中增加配置
// 加載器
module: {
rules: [
// loader的配置
{
test: /\.css$/, // 只檢測.css文件
use:[
// 執(zhí)行順序，從右到左，從下到上
"style-loader", // 將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
"css-loader" // 將css資源編譯成commonJs的模塊到j(luò)s中
],
},
],
},
5、運(yùn)行命令
npx webpack
6、html頁面增加代碼，查看頁面效果
...
<body>
<h1>Hello WebPack</h1>
<br />
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<script src="../dist/main.js"></script>
</body>
...
二、處理 Less 資源
1、下載包
npm i less less-loader -D
2、功能介紹
● less-loader:負(fù)責(zé)將less文件編譯成css文件
3、添加less資源
● 在根目錄/src/less/index.less，中創(chuàng)建文件夾及文件，然后隨便寫一點(diǎn)css樣式
.box2 {
width: 150px;
height: 150px;
background-color:tomato;
margin: 5px;
border-radius: 5px;
float: left;
}
● 順便在html中再增加幾個(gè) box2的div。
...
<body>
<h1>Hello WebPack</h1>
<br />
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<hr />
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<script src="../dist/main.js"></script>
</body>
...
4、配置
● 在src/main.js中引入前面創(chuàng)建的less文件
import count from "./js/count";
import sum from "./js/sum";
// 要想webpack打包該資源，必須引入該資源
import "./css/index.css"
import "./less/index.less"
● 在根目錄下的 webpack.config.js中增加配置文章來源：http://www.zghlxwxcb.cn/news/detail-836233.html
const path = require("path");
module.exports = {
// 入口
entry: "./src/main.js", // 需要用相對路徑
// 輸出
output: {
// 文件的輸出路徑
// __dirname nodejs的變量，代表當(dāng)前文件的文件夾目錄
path: path.resolve(__dirname, "dist"), // 需要用絕對路徑 需要用的Nodejs的核心模塊 path，專門處理路徑問題
// 文件名
filename: "main.js",
},
// 加載器
module: {
rules: [
// loader的配置
{
test: /\.css$/, // 只檢測.css文件
use:[
// 執(zhí)行順序，從右到左，從下到上
"style-loader", // 將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
"css-loader", // 將css資源編譯成commonJs的模塊到j(luò)s中
],
},
{
test: /\.less$/, // 只檢測.less文件
// loader: "xxx", // 配置中只能使用一個(gè)loader，use可以多個(gè)
use:[
// 執(zhí)行順序，從右到左，從下到上
"style-loader", // 將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
"css-loader", // 將css資源編譯成commonJs的模塊到j(luò)s中
"less-loader", // 將less資源編譯成css
],
},
],
},
// 插件
plugins: [
// plugin的配置
],
// 模式
mode: "development",
};
5、運(yùn)行命令
npx webpack
6、html頁面增加代碼，查看頁面效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-836233.html
到了這里，關(guān)于【快速搞定Webpack5】處理樣式資源（三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
