CSS打包

安裝style-loader和?css-loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。

Loader 可以理解為是模塊和資源的轉(zhuǎn)換器。

首先我們需要安裝相關(guān)Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認(rèn)識css

npm install --save-dev style-loader css-loader

修改webpack.config.js

const path = require("path"); //Node.js內(nèi)置模塊 module.exports = {//...,output:{},module: {rules: [ { test: /\.css$/, //打包規(guī)則應(yīng)用到以css結(jié)尾的文件上use: ['style-loader', 'css-loader']} ] } }

在src文件夾創(chuàng)建style.css

body{background:pink; }

修改main.js?

在第一行引入style.css

require('./style.css');

瀏覽器中查看index.html

看看背景是不是變成粉色啦？

?

總結(jié)

以上是生活随笔為你收集整理的webpack打包css文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。