(理解)webpack中postcss-loader的

(理解)webpack中postcss-loader的

认识PostCSS工具

• 什么是PostCSS呢？
  • PostCSS是一个通过JavaScript来转换样式的工具
  • 这个工具可以帮助我们进行一些CSS的转换和适配(有些属性是由兼容问题的)，比如自动添加浏览器前缀、css样式的重置
  • 但是实现这些功能，我们需要借助于PostCSS对应的插件(不安装的话PostCSS不会生效)
• 如何使用PostCSS呢？主要就是两个步骤：
  • 第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
  • 第二步：选择可以添加你需要的PostCSS相关的插件

postcss-loader

• 我们可以借助于构建工具：
  • 在webpack中使用postcss就是使用postcss-loader来处理的
• 我们来安装postcss-loader：

npm install postcss-loader -D

• 我们修改加载css的loader：（配置文件已经过多，给出一部分了）
  • 注意：因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin；

{
    test:/\.css$/,//处理less文件
    use:[
      {loader:"style-loader"},
      {loader:"css-loader"},
      {loader:"postcss-loader",
       options:{//loader会读取这里面的内容，options是选项们的意思
         postcssOptions:{
           plugins:[//插件们
             "autoprefixer"//使用这个插件对loader做出某种转换(添加前缀的插件)
           ]
         }
       }
      }
    ]
}

单独的postcss配置文件

• 因为我们需要添加前缀，所以要安装autoprefixer：

  npm install autoprefixer -D
  

• 我们可以将这些配置信息放到一个单独的文件中进行管理：(就不会让上面配置文件里面套太多层了，看着都密密麻麻的)

  • 在根目录下创建postcss.config.js(名字不能乱改，会自动寻找到这个名字的文件，就我们前面说的从.js开始找，没找到就找.json，node文件)

//postcss.config.js文件
module.exports = {//暴露出去
  //不用写postcssOptions，因为这个不是独立起来的(没有独立于webpack)，postcss内部会自动寻找到
  plugins:[
    require("autoprefixer")//引入
  ]
}

{
    test:/\.css$/,//处理less文件
    use:[
      {loader:"style-loader"},
      {loader:"css-loader"},
      {loader:"postcss-loader"}//然后默认填写就行了，因为我们在另外的配置文件中已经写了plugins的东西了，会自动去读取，less如果也想要处理的话，也要加上
    ]
}

postcss-preset-env

• 事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer

• 我们可以使用另外一个插件：postcss-preset-env

  • postcss-preset-env也是一个postcss的插件(因为有一些插件是使用postcss基本上都会使用的，所以postcss就将他集成了，叫做预设环境，已经包含了常用插件跟插件环境的配置了)
  • 它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill
  • 也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）

• 首先，我们需要安装postcss-preset-env：

  npm install postcss-preset-env -D
  

• 之后，我们直接修改掉之前的autoprefixer即可：

  plugins:[
    requires("postcss-preset-env")
  ]
  

• 注意：我们在使用某些postcss插件时，也可以直接传入字符串

  module.exports = {
    plugins:[
      "postcss-preset-env"
    ]
  }