webpack 處理CSS資源的實現(xiàn)
更新時間：2019年09月27日 08:27:36 作者：3santiago3
這篇文章主要介紹了webpack 處理CSS資源的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
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 結合 css-loader 使用
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
打包后，dist 目錄下生成一個 main.js，文件內容中包含了我們所寫的 CSS 代碼，打開瀏覽器查看，在 <head> 標簽內插入了一個 <style> 標簽，并且頁面樣式也是生效的：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
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ù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
別人寫的 js 格式代碼,說是不會死機,可以格式超長代碼.2008-05-05
詳解ES6 export default 和 import語句中的解構賦值
這篇文章主要介紹了詳解ES6 export default 和 import語句中的解構賦值，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了javascript關于“時間”的一次探索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
javascript字符串對象常用api函數(shù)小結(連接,替換,分割,轉換等)
這篇文章主要介紹了javascript字符串對象常用api函數(shù),結合實例形式總結分析了javascript常用的連接、替換、分割、轉換等相關函數(shù)與使用方法,需要的朋友可以參考下2016-09-09
淺析Javascript匿名函數(shù)與自執(zhí)行函數(shù)
的相關資料2016-02-02
"好玩的放大鏡效果" 的另一種實現(xiàn)方法...2006-11-11