webpack 處理CSS資源的實現(xiàn)
更新時間：2019年09月27日 08:27:36 作者：3santiago3
這篇文章主要介紹了webpack 處理CSS資源的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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> 標(biāo)簽內(nèi)插入了一個 <style> 標(biāo)簽，并且頁面樣式也是生效的：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript Deferred和遞歸次數(shù)限制實例
你知道Deferred和遞歸次數(shù)限制嗎？如果還不知道，可以看看下面的實例，很好，適合新手朋友們2014-10-10
javascript中Array()數(shù)組函數(shù)詳解
在JavaScript中數(shù)組也是比較常用的對象之一，數(shù)組是值的有序集合，本篇文章給大家分享Javascript中Array()數(shù)組函數(shù)詳解，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS實現(xiàn)的自定義右鍵菜單,以兩則實例形式分析了javascript自定義右鍵菜單效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家介紹了如何在TypeScript中使用函數(shù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
別人寫的 js 格式代碼,說是不會死機,可以格式超長代碼.2008-05-05
詳解ES6 export default 和 import語句中的解構(gòu)賦值
這篇文章主要介紹了詳解ES6 export default 和 import語句中的解構(gòu)賦值，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了javascript關(guān)于“時間”的一次探索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
javascript字符串對象常用api函數(shù)小結(jié)(連接,替換,分割,轉(zhuǎn)換等)
這篇文章主要介紹了javascript字符串對象常用api函數(shù),結(jié)合實例形式總結(jié)分析了javascript常用的連接、替換、分割、轉(zhuǎn)換等相關(guān)函數(shù)與使用方法,需要的朋友可以參考下2016-09-09
淺析Javascript匿名函數(shù)與自執(zhí)行函數(shù)
的相關(guān)資料2016-02-02
"好玩的放大鏡效果" 的另一種實現(xiàn)方法...2006-11-11