PostCSS
默认行为
Next.js 使用 PostCSS 编译 内置 CSS 支持 的 CSS。
开箱即用,无需任何配置,Next.js 使用以下转换编译 CSS:
- Autoprefixer 自动为 CSS 规则添加浏览器前缀(兼容到 IE11)。
- 修正 跨浏览器 Flexbox 错误,使其像 规范 一样运行。
- 自动编译新的 CSS 特性以兼容 Internet Explorer 11:
默认情况下,CSS 网格和自定义属性(CSS 变量)不会为 IE11 编译支持。
要为 IE11 编译 CSS 网格布局,你可以在 CSS 文件顶部放置以下注释:
/* autoprefixer grid: autoplace */
你还可以通过配置 autoprefixer 为整个项目启用 CSS 网格布局的 IE11 支持,配置如下(折叠)。 请参阅下面的"自定义插件"获取更多信息。
点击查看启用 CSS 网格布局的配置
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009",
"grid": "autoplace"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
CSS 变量不会被编译,因为 无法安全地这样做。 如果必须使用变量,请考虑使用 Sass 变量,它们会被 Sass 编译掉。
自定义目标浏览器
Next.js 允许你通过 Browserslist 配置目标浏览器(用于 Autoprefixer 和编译的 CSS 特性)。
要自定义 browserslist,在 package.json
中创建 browserslist
键,如下所示:
{
"browserslist": [">0.3%", "not dead", "not op_mini all"]
}
你可以使用 browsersl.ist 工具可视化你的目标浏览器。
CSS 模块
支持 CSS 模块无需任何配置。要为文件启用 CSS 模块,请将文件重命名为 .module.css
扩展名。
你可以在 这里 了解更多关于 Next.js 的 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,
},
},
],
]
: [
// 开发环境中无转换
],
}
值得注意的是: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, }, }, }, }