CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?

前言

CSSNEXT: 可以理解为 CSS 3+,虽然不一定所有特性都成为正式标准;

借助相关的插件我们可以把新的特性降级主流浏览器可以识别的状态(比如CSS3模拟）

但里面的一些特性,折腾了下发现基本可以满足开发了(代替CSS预处理器SASS,LESS);

因为大多数人用预处理器最多的几个特性无非如下: 继承,嵌套写法, 全局变量,计算颜色

当然,这不是说sass/less 不够好,相反它们可以做更多复杂的工作,逻辑运算和条件判断这些;

若你只是用到一些常规特性,那就可以放心大胆的用了;

借助webpack 开发的小伙伴基本可以搞起;其他构建工具也可以的,比如gulp,

webpack 相关的依赖

• postcss-loader : postcss 处理器
  • postcss-next : 用来解析 next=>css3写法的插件,可以理解类似 ES6(ESNEXT)转 ES5

若是用 Vue且用vue-cli初始化的脚手架,只要在 style的 lang 属性指明为postcss即可

若是自己搭建脚手架的…大体的配置也这么些

常规解析 : style-loader < css-loader < postcss-loader < sass/less loader;

常规配置

• vue-cli初始化的 webpack那个模板的已经内置了.( vue init webpack xxx_project)

// css next
// 指定为 postcss 就可以走 postcss 了..自己装个 `postcss-next`
// 在根目录的 .postcssrc.js 配置一下就行了
 
<style lang="postcss" scoped>
</style>

// .postcssrc.js
// postcss-cssnext 插件内置了 autoprefixer , 可以在内部配置你需要兼容的范围

// https://github.com/michael-ciniawsky/postcss-load-config


module.exports = {
   
  plugins: {
   
    'postcss-cssnext': {
   },
  }
};

• webpack配置的

老版的 webpack 2 之前都是自右向左执行加载器的…可以分离配置项也可以直接追加配置参数

这里说下比较新的 webpack 配置,就是加载器写法改了下…基本还是差不多

postcss的options可以写到注释那一块,但我更推荐注释那一块,会默认找根目录的postcss.config.js

这个文件作为配置路径

  {
   
    test: /\.(css|scss)$/,
    use: [
      require.resolve('style-loader'),
      <