内容简介:首先在src目录下创建一个 index.css 文件,内容如下:修改 index.js 文件内容如下:代码的内容是创建一个div,并把this_style的样式赋给它,使它的字体变为红色。然后直接运行
使用 style-loader
, css-loader
打包 css
文件
首先在src目录下创建一个 index.css 文件,内容如下:
.this_style { color: red; }
修改 index.js 文件内容如下:
import './index.css'; var root = document.getElementById('root'); var wp = document.createElement('div'); wp.innerText = 'Hello, Webpack'; wp.classList.add('this_style'); root.append(wp);
代码的内容是创建一个div,并把this_style的样式赋给它,使它的字体变为红色。然后直接运行 npm run bundle
来打包会报错吗?当然会了,因为之前说过 webpack
只能处理 js
文件,遇到 css
文件时,它就不知道该怎么办了。所以我们就配置一下 webpack.config.js
来告诉它怎么做,配置内容如下:
const path = require('path'); // 得到的path为webpack.config.js所在的目录 module.exports = { entry: { main: './src/index.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] }, mode: 'development' }
然后安装 style-loader
和 css-loader
:
npm install style-loader css-loader -D
安装完之后,执行打包命令,没有报错,就说明 webpack
已经正确打包好了 css
文件。打开 index.html 可以看到,字体的颜色已经变成了红色:
下面大概来说一下 style-loader
和 css-loader
做了哪些工作,详细的说明可以去看官方文档。
在src目录下再新建一个 test.css 文件,给 this_style 样式加一个背景色:
.this_style { background-color: #999999; /* 灰色 */ }
然后在 index.css 文件中引入 test.css:
@import './test.css'; .this_style { color: red; }
执行打包命令,打开 index.html 查看结果:
打包成功, 背景色显示了出来。
在这段打包的过程中, css-loader
会根据 css
的语法,比如 @import..
分析出几个 css
文件的关系,然后把它们合并成一段 css
, style-loader
在得到 css-loader
生成的内容之后,会把这段内容添加到指定的内页元素上,最后呈现出上图的结果。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Go语言-打包静态文件
- 多页应用增量更新静态资源Webpack打包方案
- 详解vue静态资源打包中的坑与解决方案
- 小程序静态资源无缝转移到腾讯云COS 使用wepy mpvue 等webpack打包的小程序项目
- 静态库遇到静态库
- 全局变量,静态全局变量,局部变量,静态局部变量
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。