本文主要是介绍webpack中css-loader、style-loader的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
项目目录结构如下：
各文件源码如下：
index.html：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><!-- <script src="./vue.js"></script> --><!-- build.js为webpack打包后的文件 --><script src="./build.js"></script>
</body>
</html>main.js：
// esModule语法
// 引入vue.js
import Vue from './vue.js'
// 引入app组件模块
import App from './App.js'new Vue({el: '#app',components: {App},template: `<App />`
});App.js：
var app = {template:`<div>我是一个入口组件</div>`
};// 导出app对象
export default app;webpack.dev.config.js：
module.exports = {entry: {"main": "./main.js"},output: {filename: "./build.js"},watch: true
}package.json：
{"name": "01_module","version": "1.0.0","description": "","main": "vue.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack ./main.js ./build.js","dev": "webpack --config webpack.dev.config.js","pro": "webpack --config webpack.pro.config.js"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^3.12.0"}
}
1. 新建main.css文件：
body {background-color: green;
}2. 在main.js中引入main.css：
// 引入css
import './main.css'3. 终端执行npm run dev：
报错，缺少执行该类型文件的loader。
> 01_module@1.0.0 dev
> webpack --config webpack.dev.config.jsWebpack is watching the files…Hash: 89e8bdef9f3c67250e54
Version: webpack 3.12.0
Time: 2007msAsset Size Chunks Chunk Names
./build.js 363 kB 0 [emitted] [big] main[0] (webpack)/buildin/global.js 509 bytes {0} [built][1] ./main.js 267 bytes {0} [built][2] ./main.css 176 bytes {0} [built] [failed] [1 error][3] ./vue.js 344 kB {0} [built][7] ./App.js 126 bytes {0} [built]+ 3 hidden modulesERROR in ./main.css
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
| background-color: green;
| }@ ./main.js 2:0-194. 安装css-loader、style-loader：
npm i css-loader style-loader -D安装完成，出现两个版本匹配警告：
peerDependencies WARNING css-loader@* requires a peer of webpack@^5.0.0 but webpack@3.12.0 was installed
peerDependencies WARNING style-loader@* requires a peer of webpack@^5.0.0 but webpack@3.12.0 was installed暂时忽略警告，继续下面的配置。
5. 在webpack.dev.config.js文件中声明loader模块：
// 声明模块 包含各个loadermodule: {loaders: [{// 以.css结尾的文件test: /\.css$/,// 优先执行css-loader，编译完成的css代码经过style-loader解析生成style标签，放到html页面的head标签内loader: 'style-loader!css-loader'}]},6. 终端再次执行npm run dev，报错：
ERROR in ./main.css
Module build failed: TypeError: this.getOptions is not a functionat Object.loader (E:\vuekaike\04_css_loader\node_modules\_style-loader@3.2.1@style-loader\dist\index.js:19:24)@ ./main.js 2:0-19原因：版本问题，需要降低版本。
卸载css-loader、style-loader：
npm uninstall css-loader style-loader -D从npmjs官网上查找与当前安装的webpack版本对应的loader版本号：
npm
https://www.npmjs.com/ 
重新安装：
cnpm install css-loader@0.28.11 -D
cnpm install style-loader@0.23.1 -D安装成功，终端再次执行npm run dev，编译成功：
在浏览器中打开index.html， 可以看到设置的body颜色生效，css解析成功：
这篇关于webpack中css-loader、style-loader的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
