html css js实现快递单打印_webpack打包原理入门探究（五）css-loader初探

子由风：webpack打包原理入门探究（一）​zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（二）基本配置​zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（三）入口探究​zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（四）插件探究（上）​zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（四）插件探究（中）​zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（四）插件探究（下）​zhuanlan.zhihu.com

https://babeljs.io/setup#installation​babeljs.io 子由风：webpack打包原理入门探究（五）loader初探（一）​zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（五）loader初探（二）​zhuanlan.zhihu.com

我们需要准备一些文件夹 src/styles/css/common.css

html

在 src/app.js 引入 src/styles/css/common.css

import 

然后我们需要 配置 css-loader

let 

然后执行 npm run webpack.app

样式生效，控制台打印出来了

需要安装 sass-loader node-sass 解析 scss/sass

需要安装 postcss-loader 处理浏览器样式前缀

需要安装 autoprefixer 插件

配置 webpack.app.config.js

let 

在根目下新增一个 postcss.config.js

module

package.json

{
  

跑一遍 npm run webpack.app

我们会发现我们希望处理的浏览器前缀竟然没有生效，其实 css-loader 有一个参数是 importLoaders=1,表示处理后续的 loader 当我们的样式存在 @import 其他样式的时候，需要 postcss-loader 去处理的时候，就要传递这个参数

我们再来看看浏览器

嗯，今天就到此为止吧，接下来的 就等明天吧，该洗洗睡了