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文件关联

webpack打包css,less等静态资源以及前缀兼容浏览器

3.修改配置文件,在rules增加个配置 webpack打包css,less等静态资源以及前缀兼容浏览器

webpack打包css,less等静态资源以及前缀兼容浏览器

{
				test: /\.css$/, //匹配css后缀名文件
				use: [
					'style-loader', // 插入style标签
					'css-loader' // 解析路径
				]
			}

webpack打包css,less等静态资源以及前缀兼容浏览器

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