Next.js高级特性:自定义PostCSS配置

默认行为

Next.js使用PostCSS为其内置的CSS支持编译CSS 。

开箱即用,无需配置,Next.js可以通过以下转换来编译CSS:

  1. Autoprefixer会自动将供应商前缀添加到CSS规则(返回IE11)。
  2. 跨浏览器的Flexbox错误已得到纠正,使其行为与规范相似。
  3. 新的CSS功能会自动编译以实现Internet Explorer 11兼容性:

默认情况下,为IE11支持而编译CSS网格和自定义属性(CSS变量)。

要为IE11编译CSS网格布局,可以在CSS文件顶部放置以下注释:

/* autoprefixer grid: autoplace */

您还可以 通过使用以下所示的配置(折叠)配置自动前缀,从而在整个项目中启用对CSS网格布局的IE11支持。有关更多信息,请参见下面的“自定义插件”。单击以查看配置以启用CSS网格布局

CSS变量未编译,因为无法安全地编译。如果必须使用变量,请考虑使用Sass变量之类的东西,这些东西由Sass编译。

自定义目标浏览器

Next.js允许您通过Browserslist配置目标浏览器(用于Autoprefixer和已编译的CSS功能)。

要自定义浏览器列表,请按以下方式创建一个browserslist密钥package.json

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

您可以使用browserl.ist工具可视化您要定位的浏览器。

CSS模块

无需配置即可支持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,或者从中的postcss密钥读取文件package.json

还可以使用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,
      },
    },
  },
}

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2432.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午2:42
下一篇 2021年4月20日 下午2:47

相关推荐

发表回复

登录后才能评论