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

目前創(chuàng)新互聯(lián)公司已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、利津網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

// 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)瀏覽器查看，在 標(biāo)簽內(nèi)插入了一個(gè)