webpack的css loader

前言

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']
        })
    ]
}

前言

css-loader

style-loader

postcss-loader

webpack里面的配置

猜你喜欢