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

阅读更多
个人分类: webpack
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭