前言

使用webpack時，在main.js文件中直接使用如下代碼導入了style.css文件，控制臺中顯示如下錯誤：You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

import './css/style.css';

原因是，webpack中默認只能打包.js類型文件，無法打包其他類型文件。如果要打包非.js類型文件，需要手動安裝一些第三方loader加載器。

以下為各種文件類型打包實例：

處理css文件

方式一

在項目中用npm命令本地安裝style-loader和css-loader兩個包

npm install style-loader css-loader --save--dev 

在引用style.css文件時，將import './css/style.css';代碼改為以下代碼：

import 'style-loader!css-loader!./style.css'")'; //先經(jīng)過css-loader和style-loader處理

重新用webpack打包

npm run dev 

這種方式的缺點是，當需要引入多個css文件，每次引入時都需要加style-loader!css-loader!，比較麻煩，因此推薦使用以下方式：

方式二

在項目中用npm命令本地安裝style-loader和css-loader兩個包

npm install style-loader css-loader --save--dev 

打開webpack.config.js文件，在里面新增一個配置節(jié)點module，在module對象中，有一個rules屬性，它是一個數(shù)組，里面存放了所有第三方文件匹配和處理規(guī)則。如下代碼匹配處理css文件：

module: { // 配置所有第三方loader 模塊 rules: [ // 第三方模塊的匹配規(guī)則  { test: //.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 文件的 loader ] }

注意：此處'style-loader'和'css-loader'順序不可替換。因為use中處理順序為從后往前。先用css-loader對css文件進行處理，將處理后的結(jié)果交給style-loader作進一步處理，處理為webpack可以進行打包的數(shù)據(jù)。

引入style.css文件

import './css/style.css';

重新用webpack打包

npm run dev 

以下所有其他類型文件的打包同方式二

處理less文件

在項目中用npm命令本地安裝style-loader和css-loader和less-loader和less三個包(若已有style-loader和css-loader則不必再安裝這兩個)

npm install style-loader css-loader less-loader less --save--dev 

打開webpack.config.js文件，在節(jié)點module中rules屬性數(shù)組中，新增如下less的規(guī)則：

{ test: //.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // 處理 less 文件的 loader

引入style.less文件

import './css/style.less';

重新用webpack打包

npm run dev