前言
webpack里面,其实只能识别js,如果要对css进行处理,我们要安装一些loader。
css-loader
当然,如果你想用sass、less之类的,安装对应的scss-loader即可,我这里使用的是css-loader。
如果想要把css文件作为<style>的内容插入到模板文件当中,首先要安装css-loader,可以让js加载css,通过import即可把css引入进来。如下:
import './Page1.css'
class Page1 extends Component {
constructor(props){
super(props);
this.state={
id:''
}
}
render() {
return (
<div>
<div onClick={()=>this.props.fetch()} className="button">点击</div>
状态:<span>{this.props.status}</span><br/>
结果:<span>{this.props.result}</span>
</div>
)
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Page1)
style-loader
想要把css文件作为<style>的内容插入到模板文件当中,还需要安装style-loader。此loader可以把加载到js里面的css作为style内容插入到html当中。如下编译后的html文档:
postcss-loader
如果某些css要考虑到浏览器的兼容性(比如css3中的flex),我们要webpack在打包的过程中自动为这些css属性加上浏览器前缀,这时就用到了postcss-loader和它对应的插件autoprefixer。
npm install postcss-loader autoprefixer --save-dev
css:
.button{
width:100px;
height: 50px;
color: black;
border: 1px solid red;
box-sizing: border-box;
}
编译后:
自动添加了私有前缀。
webpack里面的配置
webpack.dev.config.js
{
test: /\.css$/, //并且想要把css文件作为<style>的内容插入到模版文件中,需要css-loader和style-loader,前者是让js可以加载css,后者把加载的css作为style标签内容插入到html当中
use:['style-loader','css-loader',{
loader:'postcss-loader',
options:{
plugins:(loader)=>[
require('autoprefixer')({
browsers:['last 5 versions']
})
]
}
}]
}]
还可以分开,把postcss的配置放在特定的postcss.config.js里面 (文件名必须为这个)
webpack.dev.config.js
{
test: /\.css$/, //并且想要把css文件作为<style>的内容插入到模版文件中,需要css-loader和style-loader,前者是让js可以加载css,后者把加载的css作为style标签内容插入到html当中
use: ['style-loader', 'css-loader', 'postcss-loader']
}
postcss.config.js
let autoprefixer=require('autoprefixer');
module.exports={
plugins:[
autoprefixer({
browsers: ['last 5 versions']
})
]
}