npm i style-loader css-loader -D 处理css模块下载
想配合使用less 还需下载 npm i less less-loader -D
使用sacc 下载 node-sass sass-loader -D
css-loader
这个loader可以处理css文件 并解析css代码
style-loader
这个loader生成style标签 并把style标签插入到head标签后面
less-loader
这个loader可以处理less文件 并解析less代码
sass-loader
这个loader可以处理sass文件 并解析sass代码
npm i postscc-loader -D 处理css前缀兼容
使用postcss需要在跟目录配置postscc.config.js文件
const path = require('path')
module.exports = {
mode:'development' ,//打包后的代码在开发环境中 打包后的代码不会被压缩
entry:'./src/index.js', //打包的文件入口
output:{ //打包后文件的输入地址
path:path.join(__dirname,'bundle'),//path必须是个绝对路径
},
module:{
rules:[
{
test:/\.css$/,//匹配到css结尾
use:['style-loader','css-loader'] //单独使用css样式
},
{
test:/\.less$/,//匹配到less结尾
use:[ //单独使用 less 样式
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
}
或者中间部分写成 less和css 一起使用
module:{
rules:[
{
test:/\.(css|less)$/, //匹配到css,less的css样式文件结尾
use:[
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2 //代表css都会在后面两个 loader中都会执行一次
}
},
'less-loader'
"postscc-loader"
]
}
]
}
使用sacc和css
module:{
rules:[
{
test:/\.(css|sass)$/, //匹配到css,less的css样式文件结尾
use:[
'style-loader',
{ loader: 'css-loader',
options: {
importLoaders: 2 //代表css都会在后面两个 loader中都会执行一次
}
},
'sass-loader',
'postscc-loader'
]
}
]
}
npm i autoprefixer -D 与postscc搭配处理兼容 必须有
postscc.config.js文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
如果想多个匹配浏览器兼容
在package.json中的最后加上
"browserslist":"[
配置https://www.npmjs.com/package/browserslist/v/2.11.3
"> 5%",
"ie 6-8"
]"
npm i mini-css-extract-plugin -D
把css代码打包成一个css文件
npm i optimize-css-assets-webpack-plugin -D
压缩打打包后的css文件
在wabpack中打包压缩代码 与entry同级
// 使用了 mini-css-extract-plugin 插件 style-loader就不能再使用
的更换成 loader: MiniCssExtractPlugin.loader
引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
plugins:[
new MiniCssExtractPlugin({
filename:'css/[name].css' //输出文件名 ,地址名
}),
new OptimizeCssAssetsPlugin(), //压缩
]