欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年09月27日 08:27:36   作者：3santiago3  
這篇文章主要介紹了webpack 處理CSS資源的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 一個引入 CSS 資源的案例

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

就這樣打包的話，是會報(bào)錯的，那么想要成功打包 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)文章

最新評論