PostCss --- webpack的css处理工具

PostCss扩展支持特性(添加浏览器前缀，使用下一代CSS语法)

#postcss.config.js新建其文件---配置
module.exports = {
  plugins: [
    // 需要使用的插件列表
    require('postcss-cssnext'),
    require('postcss-import'),
    require('autoprefixer'),
    require('cssnano'),
  ]
}

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      viewportWidth: 1024,
      viewportHeight: 700,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
  }
}

2.安装依赖

# 安装 Webpack Loader 依赖
npm i -D postcss-loader css-loader style-loader
# 根据你使用的特性安装对应的 PostCSS 插件依赖
使用postcss-import插件，遵循@import规则，你可以将reset.css样式合并到你的主样式表中，减少http请求。
npm i -D postcss-cssnext postcss-import  cssnano