webpack打包css文件

1、打包css文件,需要css-loader和 style-loader,其中 css-loader的作用是识别 css文件,将所有 css文件整合打包,style-loader的作用将style标签插在header头部部分。

//下载style-loader css-loader
cnpm install style-loader css-loader --save-dev
//配置webpack.config.js
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
}

2、自定添加浏览器厂商前缀,需要额外添加postcss-loader,同时安装autoprefixer

// 下载postcss-loader autoprefixer
cnpm install postcss-loader autoprefixer --save-dev
// 配置webpack.config.js
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader', 'postcss-loader']
}

//添加postcss.config.js
module.exports={
    plugins: [require('autoprefixer')]
}

  

 

 

 

 

 

 

 

 

 

 

猜你喜欢

转载自www.cnblogs.com/Ladai/p/11818956.html