webpack如何引入css?

webpack如何引入css?如何利用webpack把样式打包进我们的项目文件?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

在webpack的世界里,一起文件都是模块。

默认webpack只会打包js代码,如何想要打包其它内容,就需要相对应的loader。

安装css-loader、style-loader

$ npm i -D css-loader style-loader

说明:

  • css-loader的任务:把css文件作为模块打包

  • style-loader的任务:把打包好的css文件动态的插入到html文件的<style>标签内

配置webpack.config.js

注意:loader处理的顺序:

  • 先是css-loader处理(webpack把mian.css文件作为模块打包)

  • 接着是style-loade处理(让打包后的css可以写入html文件中的<style>)

在app.js文件中引入main.css

编辑main.css

最后,执行

$ npm run build

在浏览器预览生成的index.html文件,打开控制台可以看到js动态加载的<style>:

更多前端开发知识,请查阅 HTML中文网 !!

以上就是webpack如何引入css?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读