webpack教程(四)——css的載入

來源:互聯網
上載者:User

標籤:content   實驗   紅色   樣式   狀態   http   元素   .class   extract   

首先要安裝css的loader

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

然後在webpack.config.js中配置如下代碼

意思是先用css-loader載入css檔案,再用style-loader添加在頁面中

在app目錄下建立component.css檔案

body{  background-color: red;}

在app/index.js中引入css檔案

運行npm run start命令。

 

可以看到我們瀏覽器整個背景都變成了紅色。

webpack做了什麼呢?

看到build/app.js中有如下代碼。

再看下我們生產的index.html檔案

奇怪了,並沒有內斂樣式也沒有引入的css檔案,那瀏覽器是為什麼變紅的呢?

我們在瀏覽器中開啟調試工具。

原來樣式在這!

webpack動態添加了內斂樣式在代碼中。

如果多人協作開發的情況下,會有很大可能出現代碼命名重複的情況,如果出現這種情況怎麼辦呢?

來讓我們實驗一下。

在app目錄下添加兩個css檔案,style1.css

body{  background-color: red;}.class1{
color: green;}

和style2.css

body{  background-color: black;}.class1{  color: blue;}

在index.js中引入這兩個檔案

 

修改component.js檔案,使其給元素添加傳入的類名

在webpack.config.js中添加如下配置

我們執行npm run start 命令若看到

 

即為打包成功。

開啟瀏覽器http://localhost:8080/

可以看到同樣的類名都正常顯示出來了,看下右邊的文檔結構,發現我們的類名不是class1了。

原來CSS Modules對我們的類名做了雜湊處理,我們再也不用擔心同事跟我們有相同的命名了。

是不是很方便呢?

讓我們再來面對另一個問題,現在這種情況下css是js動態添加上去的,如果當js檔案有一個長時間的阻塞事件,頁面將會處於長時間的無樣式的狀態。

這是我們不希望看到的,怎麼把css檔案和js檔案分離呢?

首先我們需要安裝一個外掛程式

npm install extract-text-webpack-plugin --save-dev

安裝成功之後在webpack.config.js中添加如下配置

完成之後運行一下npm run start

開啟瀏覽器http://localhost:8080/

可以看到我們兩個css檔案合并為一個app.css檔案並以外部樣式表的形式載入。

而且css檔案比js檔案要先請求,這樣就避免頁面會出現FOUC-Flas Of Unstyle Content無樣式內容閃爍。

webpack關於css的載入就講到這裡。

 

webpack教程(四)——css的載入

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.