1、添加postcss支持，npm i -D postcss-loader precss post-cssnext style-loader css-loader
2、配置postcss, 根目录下创建 postcss.config.js 文件，如下
module.exports = {
plugins: [
require('precss'),
require('postcss-cssnext')
]
}
3.配置webpack开发配置， 在webpack.dev.conf.js中 module 的rules中添加
{
test: /.(css|pcss)$/,
loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
exclude: /node_modules/
}
4.app/public/css下创建 index.pcss文件，写css代码
5.在app/component/index/index.jsx中引入 index.pcss文件
import '../../public/css/index.pcss'
6.图片文件的处理，原则上本地图片建议都放在背景里 ，添加依赖
npm i -D file-loader url-loader
8.修改webpack配置文件
config -> webpack -> webpack.dev.conf.js
新增代码
{
test: /.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
}
9.插入图片
修改 index.pcss
app -> public -> css -> index.pcss 目录下
.logo {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("../img/ico-header-logo.png"); //添加的图片
background-size: contain;
}
react+webpack4构建项目（2webpack4 处理CSS及图片,引入postCSS,及图片处理等）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React...
- 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
- 微信公众号首发！这边文章排版可能不好，请关注公众号，查看历史消息！ 本教程总共7篇,每日更新一篇,请关注我们!你可...
