webpack打包css，sass,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文件配置

**安装
cnpm i less-loader less -D

2.2.修改配置文件

在rules数组中添加less规则

{
  test: /\.less$/,
  use: [
    'style-loader', // 插入style标签
    'css-loader', // 解析路径
    'less-loader' // 把less转换成css
  ]
}

3.1 sass配置安装

npm i sass-loader node-sass -D(注意要装中两个)

3.2配置文件后缀名为SCSS,(不是sass)*

3.3引入和修改配置文件

{
			test: /\.scss$/, //这里后缀名是scss后缀名文件
			use: [
				'style-loader', // 插入style标签
				'css-loader', // 解析路径
				'sass-loader' //从下到上执行，sass-loader变成css文件处理
			]

}

3.4 stylus配置
npm i -D stylys stylus-loader

---

---

---

---

# 4.自动添加前缀兼容浏览器

1.安装
npm i postcss-loader autoprefixer -D
或者
yarn add postcss-loader autoprefixer -D

2.新建一个配置文件（名字为postcss.config.js）来处理autoprefixer包插件**

 module.exports = {
  plugins: [
  	require('autoprefixer')
  ]
}

****3.在配置文件中添加’postcss-loader’
效果如图：