如何在webpack中加載css文件

這篇文章將為大家詳細(xì)講解有關(guān)如何在webpack中加載css文件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

webpack加載css文件及其配置

• 當(dāng)我們寫了幾個css文件之后如果想要引用到html中去的話我們最開始的方式就是通過link標(biāo)簽將css文件導(dǎo)入進(jìn)去，但是如果我們的css文件有很多的話，一個個的導(dǎo)入是不推薦的；而現(xiàn)在我們學(xué)了webpack，我們希望的是通過打包bundle.js文件，將所有的依賴文件全部導(dǎo)入進(jìn)去。

• 我們要知道的是，如果在入口函數(shù)main.js文件中如果沒有導(dǎo)入css文件，那么打包的bundle.js文件必然不會有css文件，所有我們需要讓main.js文件依賴css文件。

• 使用代碼：require('css文件地址')

• 依賴完之后，我們再打包一下 npm run build 會發(fā)現(xiàn)報錯了。錯誤為：You may need an appropriate loader to handle this file type。意思是說你可能需要一個合適的loader來處理這個文件

• 于是我們打開webpack的中文網(wǎng)址，在里面找到了我們需要安裝 css-loader 和 style-loader 這兩個loader。并且我們還需要在webpack.config.js文件中配置一下這些loader

• 于是我們使用npm下載這兩個依賴，代碼如下：npm install css-loader style-loader --save-dev

• 在webpack.config.js文件中，有一個module的屬性，該屬性為一個對象，在該對象中有個rules屬性，是一個數(shù)組，數(shù)組中的每一項(xiàng)都是處理不同文件loader所需要的對象。代碼如下：

const path = require('path');
    module.exports = {
        // 在配置文件中，手動指定 入口 文件和 出口 文件
        mode:'development',   //  webpack4.x版本中需要加入這個屬性
        entry:'./src/main.js',  //  入口文件
        output:{  //  出口文件
            path:path.resolve(__dirname,'dist'),  //  指定將要打包好的文件應(yīng)該要輸出到哪個地方去（注意：路徑必須是絕對地址）
            filename: 'bundle.js' //  指定輸出文件的文件名
        },
        module:{
            rules:[
            {test:/\.css$/ , use:['style-loader' , 'css-loader']}
            ]
        }
    }

其中test表示我們要處理的是哪種類型的文件，use中的每一項(xiàng)則是處理該類文件需要的loader。

注意：css-loader這個loader的作用是用來讓main.js文件加載該css文件，而style-loader的作用是將模塊的導(dǎo)出作為樣式添加到 DOM 中。這里可能有人會有疑問：按這樣的作用來講的話應(yīng)該先加載文件再作為樣式添加到DOM中去才對，那數(shù)組中的順序應(yīng)該不是這樣的。我在這里很明確的告訴你，你的想法是沒有錯的，只是webpack他這一點(diǎn)非常的奇特，它是從數(shù)組的最后一個元素，從右到左的順序加載loader的。

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

關(guān)于如何在webpack中加載css文件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。