前言：

對于webpack來說，每個文件都是一個模塊，比如css、js、html、jpg等。

對于不同的模塊，就得需要不同的加載器(Loaders)來處理，所以加載器是webpack最重要的功能。

安裝不同的加載器就可以對不同的后綴名的文件進行處理，比如現在要寫一些CSS樣式，就要用到style-loaedr和css-loader。

項目舉例搭建教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83012059

安裝style-loader和css-loader:

進入到你的項目目錄，并在此目錄下打開cmd

下面通過npm 來安裝它們。

輸入：

npm install css- loader --save-dev

再輸入：

npm install style-loader --save-dev

安裝完成后，在webpack.config.js文件 里配置Loader，增加對.css文件的處理：

var path = require('path'); var config = {entry:{main:'./main'},output:{path:path.join(__dirname,'./dist'),publicPath:'/dist/',filename:'main.js'},module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']}]}};module.exports = config;

在module對象的rules屬性中可以指定一系列的loaders，每一個loader都必須包含test和use兩個選項。

當webpack在編譯過程中遇到require()或者import語句導入一個后綴為.css的文件時，先將它通過css-loader轉換，再通過style-loader轉換，然后才打包。

use選項這里是數組，它的編譯順序是從后往前，也可以是字符串。

在項目目錄下新建一個style的文件，并在main.js中導入。

style.css

#app{font-size:24px;color:#f50; }

main.js

import './style.css';

執行:

npm run dev

就可以看到頁面中的文字已經改變了樣式。

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的webpack使用加载器来加载CSS样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。