webpack之css-loader/style-loader/postcss-loader

1.使用css-loader处于页面的中的css文件,使用style-loader实现将转换后的文件插入到页面中。使用postcss-loader的autoprefixer实现将css3属性添加上厂商前缀。

2.安装:npm install --save-dev css-loader style-loader

npm install --save-dev postcss-loader。 

//PostCSS loader for webpack to postprocesses your CSS withPostCSS plugins

npm install --save-dev autoprefixer。//用来实现加上厂商前缀

3.安装包API地址  https://www.npmjs.com/package/

4.webpack.module.loaders里面的配置:

module:{

loaders:[

{

test:/\.css$/,

loader:'style-loader!css-loader'

 // css-loader实现css的处理,style-loader转处理后的文件插入到页面中

}

]

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,548评论 7 35
  • Webpack学习总结 此文只是自己学习webpack的一些总结,方便自己查阅,阅读不变,非常抱歉!! 下载安装:...
    Lxs_597阅读 4,610评论 0 0
  • 可以结合慕课网的视频来读这篇文章,地址:http://www.imooc.com/learn/802 Webpac...
    哈哈腾飞阅读 6,004评论 0 7
  • webpack配置DEMO webpack.config.js文件官方标配示例如下: 参考各路大神的流程写下来.....
    章鱼不丸子阅读 4,064评论 0 3
  • 2017.10.21 敦煌壁画 特点 装饰绘画 在自然基础上 加以平面化 不追求立体空间 1 飞天 吉祥如意 菩萨...
    孤独和酒兮阅读 4,938评论 0 0