css檔案如何進行打包？css檔案打包的方法

本篇文章給大家帶來的內容是關於css檔案如何進行打包？css檔案打包的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

css檔案打包

Loaders是webpack最重要的功能之一 ，可以通過不同loader ，從而對不同檔案格式進行特定處理

Loaders是在module模組裡面

簡單的舉幾個Loaders使用例子：

• 可以把SASS檔案的寫法轉換成CSS，而不在使用其他轉換工具。

• 可以把ES6或者ES7的代碼，轉換成大多瀏覽器安全色的JS代碼。

• 可以把React中的JSX轉換成JavaScript代碼。

注意：所有的Loaders都需要在npm中單獨進行安裝，並在webpack.config.js裡進行配置。下面我們對Loaders的配置型簡單梳理一下。

test：用於匹配處理檔案的副檔名的運算式，這個選項是必須進行配置的；
use：loader名稱，就是你要使用模組的名稱，這個選項也必須進行配置，否則報錯；
include/exclude:手動添加必須處理的檔案（檔案夾）或屏蔽不需要處理的檔案（檔案夾）（可選）；
query：為loaders提供額外的設定選項（可選）

打包css檔案
在src目錄下建立一個css檔案夾，在檔案夾裡建立index.css檔案
./src/css/index.css

 body{      background-color: red;           color: white;       }

CSS檔案建立好後，需要引入到入口檔案中，才可以打包到，這裡我們引入到entry.js中。
/src/entery.js中在首行加入代碼：

import css from ‘./css/index.css’;

CSS和引入做好後，我們就需要使用loader來解析CSS檔案,分別是style-loader和css-loader。

style-loader:
它是用來處理css檔案中的url()等，npm中的網址：https://www.npmjs.com/package/style-loader
用npm install進行項目安裝 ：安裝style-loader和css-loader一定要注意，他們的代碼不一樣

npm install style-loader –save-dev

css-loader：
它是用來將css插入到頁面的style標籤。npm中的網址：https://www.npmjs.com/package/css-loader
用npm install 進行項目安裝：

npm install –save-dev css-loader

兩個loader都下載安裝好後，我們就可以配置我們loaders了。

loaders配置：
webpack.config.js

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

module裡面寫法有3種
1、use: [ ‘style-loader’, ‘css-loader’
2、loader:[‘style-loader’,’css-loader’]
3、

use:[{    loader:'style-loader'},{    loader:'css-loader'}]