webpack 處理CSS資源的實現(xiàn)
更新時間：2019年09月27日 08:27:36 作者：3santiago3
這篇文章主要介紹了webpack 處理CSS資源的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1. 一個引入 CSS 資源的案例
// index.js import './style.css'
/* style.css */
#root {
height: 100px;
width: 100px;
border: 1px solid #ccc;
}
就這樣打包的話，是會報錯的，那么想要成功打包 CSS 資源，需要使用下面介紹的幾個 loader。
2. style-loader
將 CSS 樣式注入到 DOM 中。
2.1 結(jié)合 css-loader 使用
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
打包后，dist 目錄下生成一個 main.js，文件內(nèi)容中包含了我們所寫的 CSS 代碼，打開瀏覽器查看，在 <head> 標簽內(nèi)插入了一個 <style> 標簽，并且頁面樣式也是生效的：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript在指定范圍內(nèi)生成不重復(fù)的隨機數(shù)的方法和相關(guān)實例，有需要的小伙伴可以參考下。2015-07-07
很久以前就有這個問題，總是找不到通用的，或比較簡單的“圖片連續(xù)無間隙向左滾動，無間隙向右滾動，符合W3C Web標準”2008-06-06
這篇文章主要介紹了JavaScript日期對象(Date)基本用法,結(jié)合實例形式較為詳細的分析了JavaScript日期對象(Date)獲取日期、時間戳、年月日、星期及日期比對等操作技巧,需要的朋友可以參考下2017-01-01
梳理總結(jié)25個JavaScript數(shù)組操作方法實例
這篇文章主要分享JavaScript數(shù)組操作方法實例梳理總結(jié)，刪除數(shù)組重復(fù)項、獲取數(shù)組的片段等方法，需要的小伙伴可以參考一下2022-06-06
下面小編就為大家?guī)硪黄獙τ贘avascript 執(zhí)行上下文的全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
微信小程序 配置頂部導(dǎo)航條標題顏色的實現(xiàn)方法
這篇文章主要介紹了微信小程序 配置頂部導(dǎo)航條標題顏色的實現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了bootstrap模態(tài)框示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
基于javascript實現(xiàn)精確到毫秒的倒計時限時搶購
現(xiàn)如今做電商網(wǎng)站必不可少的一個效果就是限時搶購，這也是各大電商網(wǎng)站的一種促銷手段。如何實現(xiàn)倒計時限時搶購，本文為大家分享了javascript實現(xiàn)倒計時限時搶購的的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了解決 window.onload 被覆蓋的問題方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
很多同學(xué)在面試的時候都會被要求手寫一個Promise,那么今天我總結(jié)了一些手寫Promise的方法，可以跟著我的思路一起來實現(xiàn)一個Promise,讓我們的面試更有把握2023-02-02