webpack 处理CSS资源的实现
更新时间：2019年09月27日 08:27:36 作者：3santiago3
这篇文章主要介绍了webpack 处理CSS资源的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1. 一个引入 CSS 资源的案例
// index.js import './style.css'
/* style.css */
#root {
height: 100px;
width: 100px;
border: 1px solid #ccc;
}
就这样打包的话，是会报错的，那么想要成功打包 CSS 资源，需要使用下面介绍的几个 loader。
2. style-loader
将 CSS 样式注入到 DOM 中。
2.1 结合 css-loader 使用
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
打包后，dist 目录下生成一个 main.js，文件内容中包含了我们所写的 CSS 代码，打开浏览器查看，在 <head> 标签内插入了一个 <style> 标签，并且页面样式也是生效的：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
你知道Deferred和递归次数限制吗？如果还不知道，可以看看下面的实例，很好，适合新手朋友们2014-10-10
在JavaScript中数组也是比较常用的对象之一，数组是值的有序集合，本篇文章给大家分享Javascript中Array()数组函数详解，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JS实现的自定义右键菜单,以两则实例形式分析了javascript自定义右键菜单效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要为大家介绍了如何在TypeScript中使用函数实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
别人写的 js 格式代码,说是不会死机,可以格式超长代码.2008-05-05
详解ES6 export default 和 import语句中的解构赋值
这篇文章主要介绍了详解ES6 export default 和 import语句中的解构赋值，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了javascript关于“时间”的一次探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
这篇文章主要介绍了javascript字符串对象常用api函数,结合实例形式总结分析了javascript常用的连接、替换、分割、转换等相关函数与使用方法,需要的朋友可以参考下2016-09-09
的相关资料2016-02-02
"好玩的放大镜效果" 的另一种实现方法...2006-11-11
最新评论