introduction

• Tailwind CSS Example

默认行为

Next.js 通过PostCSS 编译CSS 进行内置CSS 支持 …

开箱即用,无需配置,Next.js 编译CSS 需要如下转换:

• Autoprefixer 自动增加厂商前缀到css 规则上(支持到IE11)
• Cross-browser Flexbox bugs 跨浏览器弹性框错误已得到纠正，其行为与 the spec 类似。
• 新的CSS 特性将自动的针对IE 11 兼容性进行编译
  • allProperty
  • Break Properties
  • font-variantProperty
  • Gap Properties
  • Media Query Ranges

默认, CSS Grid 以及 Custom Properties (CSS variables) 是没有编译的 - 为了支持IE 11..

/* autoprefixer grid: autoplace */

你能够启动IE 11 对 CSS Grid Layout 的支持(直接在项目中使用以下配置进行autoprefixer的配置)

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

CSS 变量不会被编译(因为它可能不安全),如果你必须使用环境变量,考虑使用替代方式(例如 Sass variables 通过Sass的形式进行编译) …

自定义目标浏览器

Next.js 允许你配置目标浏览器(对于 Autoprefixer 以及 编译的css 特性),通过 Browserslist 进行设定 …

{
  "browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
}

你能够使用browserl.ist 工具可视化那些是你想支持的目标浏览器 ..

CSS modules

为了支持CSS 模块化,不需要做任何配置,为了针对一个文件启用CSS 模块,重命名文件让它具有.module.css后缀即可 ..

自定义插件

警告:

当你定义一个自定义的PostCSS 配置文件,Next.js 完全禁用了默认的行为 … 确保能够手动的配置需要被编译的所有特性,包括 Autoprefixer. 你也需要去安装任何需要包括的插件(手动的在自定义配置中) …

npm install postcss-flexbugs-fixes postcss-preset-env

为了自定义PostCSS 配置,创建一个postcss.config.json文件到项目的根目录中 …

以下是Next.js 默认的配置

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

Next.js 也允许使用.postcssrc.json或者package.json中的 postcss配置

同样可以使用postcss.config.js配置PostCSS, 当我们想要基于环境条件性的包括某些插件

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}

Next.js 也允许这个文件是.postcssrc.js

不要使用require去导入这个PostCSS 插件,插件必须作为字符串形式进行提供 …

注意如果你的postcss.config.js需要去支持相同项目中的其他非Next.js 工具,必须使用可互操作的基于对象的形式代替:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}