webpack 處理CSS資源的實(shí)現(xiàn)

更新時(shí)間：2019年09月27日 08:27:36 作者：3santiago3

這篇文章主要介紹了webpack 處理CSS資源的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 一個(gè)引入 CSS 資源的案例

// index.js
import './style.css'

/* style.css */
#root {
 height: 100px;
 width: 100px;
 border: 1px solid #ccc;
}

就這樣打包的話，是會(huì)報(bào)錯(cuò)的，那么想要成功打包 CSS 資源，需要使用下面介紹的幾個(gè) loader。

2. style-loader

將 CSS 樣式注入到 DOM 中。

2.1 結(jié)合 css-loader 使用

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   }
  ]
 }
}

打包后，dist 目錄下生成一個(gè) main.js，文件內(nèi)容中包含了我們所寫(xiě)的 CSS 代碼，打開(kāi)瀏覽器查看，在 <head> 標(biāo)簽內(nèi)插入了一個(gè) <style> 標(biāo)簽，并且頁(yè)面樣式也是生效的：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript生成不重復(fù)的隨機(jī)數(shù)
這篇文章主要介紹了javascript在指定范圍內(nèi)生成不重復(fù)的隨機(jī)數(shù)的方法和相關(guān)實(shí)例，有需要的小伙伴可以參考下。
2015-07-07
符合W3C Web標(biāo)準(zhǔn)的圖片連續(xù)無(wú)間隙水平滾動(dòng)
很久以前就有這個(gè)問(wèn)題，總是找不到通用的，或比較簡(jiǎn)單的“圖片連續(xù)無(wú)間隙向左滾動(dòng)，無(wú)間隙向右滾動(dòng)，符合W3C Web標(biāo)準(zhǔn)”
2008-06-06
JavaScript日期對(duì)象(Date)基本用法示例
這篇文章主要介紹了JavaScript日期對(duì)象(Date)基本用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript日期對(duì)象(Date)獲取日期、時(shí)間戳、年月日、星期及日期比對(duì)等操作技巧,需要的朋友可以參考下
2017-01-01
梳理總結(jié)25個(gè)JavaScript數(shù)組操作方法實(shí)例
這篇文章主要分享JavaScript數(shù)組操作方法實(shí)例梳理總結(jié)，刪除數(shù)組重復(fù)項(xiàng)、獲取數(shù)組的片段等方法，需要的小伙伴可以參考一下
2022-06-06
對(duì)于Javascript 執(zhí)行上下文的全面了解
下面小編就為大家?guī)?lái)一篇對(duì)于Javascript 執(zhí)行上下文的全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
微信小程序配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下
2017-09-09
bootstrap模態(tài)框示例代碼分享
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
基于javascript實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)限時(shí)搶購(gòu)
現(xiàn)如今做電商網(wǎng)站必不可少的一個(gè)效果就是限時(shí)搶購(gòu)，這也是各大電商網(wǎng)站的一種促銷(xiāo)手段。如何實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)，本文為大家分享了javascript實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)的的相關(guān)代碼，感興趣的小伙伴們可以參考一下
2016-04-04
解決 window.onload 被覆蓋的問(wèn)題方法
這篇文章主要介紹了解決 window.onload 被覆蓋的問(wèn)題方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
JavaScript面試必備技巧之手寫(xiě)一個(gè)Promise
很多同學(xué)在面試的時(shí)候都會(huì)被要求手寫(xiě)一個(gè)Promise,那么今天我總結(jié)了一些手寫(xiě)Promise的方法，可以跟著我的思路一起來(lái)實(shí)現(xiàn)一個(gè)Promise,讓我們的面試更有把握
2023-02-02