css文件怎么打包

這篇文章主要介紹了css文件怎么打包，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css文件打包

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

Loaders是在module模塊里面

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

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

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

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享css文件怎么打包內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!