配置cssnext

• 起初我的想法是使用less或者scss的，我日常开发使用的ui库基本是element和vant，但是在我配置主题文件的时候发现，想在vite打包的情况下配置一些全局的less/sass变量是一件很困难的事情，我至今没有解决，希望有解决方案的小伙伴可以在留言中告诉我。
• 无奈之下选择使用cssnext，这个概念集合了一些将来的css4的东西，听说阿里已经玩了两三年了，但是我现在才开始入手。

安装cssnext

yarn add postcss-cssnext -S

• 在根目录中新建.postcssrc.js或者postcss.config.js两个文件是同样得效果，在细节上稍稍有不同，感兴趣的自己研究

配置postcss-cssnext

module.exports = {
  plugins: {
    'postcss-cssnext': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    }
  }
};

• 配置完成后我们就能使用一些全局的cssnext的变量了，这些我是写到theme.css文件中的，如果是在vue中使用的话需要你设置lang="postcss"这样你也能在vue文件中使用了

移动端适配

• 这里我采用的移动端适配方式是将px转rem，大家第一时间想到的就是使用postcss-pxtorem，我使用的也是这个插件

安装

yarn add postcss-pxtorem -D

配置

• 之前已经配置过postcss-cssnext了，而postcss-pxtorem同样也只是postcss的一个插件，所以可以公用一个配置文件

module.exports = {
  plugins: {
    'postcss-cssnext': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 100,
      propList: ['*'],
      exclude: /node_modules/i
    }
  }
};

• 这里大家回好奇为什么不配置autoprefixer，大家可以先尝试一下，因为postcss-cssnext中已经集成了autoprefixer，如果我们配置的话会有一个警告，当然如果你执意要使用的话你可以在postcss-cssnext中配置warnForDuplicates为false去禁止这个警告的出现
• 目前的话这个项目已经满足我们平时的开发基础要求了，剩下的就是根据实际业务情况来进行开发了