webpack打包css,less等静态资源以及前缀兼容浏览器
1.全局安装CSS(使用loader打包css文件)
npm i css-loader style-loader -D
或 yarn add css-loader style-loader -D
2.从index.js引入css文件关联
3.修改配置文件,在rules增加个配置
{
test: /\.css$/, //匹配css后缀名文件
use: [
'style-loader', // 插入style标签
'css-loader' // 解析路径
]
}
2.1 less文件配置
安装
npm i less-loader -D
或 yarn add less less-loader -D
2.2.修改配置文件
在rules数组中添加less规则
{
test: /\.less$/,
use: [
'style-loader', // 插入style标签
'css-loader', // 解析路径
'less-loader' // 把less转换成css
]
}