处理CSS
- 安装npm install --save-dev css-loader
importLoaders 用于配置在@import前有几个loader(css-loader前有几个loader)
安装npm install --save-dev style-loader(将css放到style标签中,直接HMR)
安装npm i -D postcss-loader (通过各种插件处理css,前缀补全,px转rem,转换成未来css)
image.png
- 安装npm install autoprefixer --save-dev (前缀补全,自动兼容其他浏览器)
新建postcss.config.js
image.png
处理图片
1, 安装 npm install url-loader --save-dev
- limit
配置图片的最大大小,如果小于,就会生成base64,置于js中,如果大于,就会通过参数fallback的值,来处理图片
- fallback
默认值为file-loader,当通过fallback ,会继承url中配置的参数,所以,可以直接在url的options中配置file-loader的参数
2, 安装npm install file-loader --save-dev (fallback默认值需要用到)
image.png
处理字体
1, 使用url-loader或者file-loader都可以
image.png
将图标文件下载下来,把对应的文件放到fonts文件夹中,之后,找到对应的css文件,复制下来,黏贴进自己项目的css中,修改对应图标文件的路径
image.png
