本文主要是介绍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-19
4. 安装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版本号:
npmhttps://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的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!