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'}]

相關推薦：

對網站中的js,css檔案進行打包

有時css引用圖片打包後找不到資源檔是什麼原因

以上是css檔如何進行打包？ css檔案打包的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！