Nuxt.js中如何为指定SCSS文件条件运行postcss插件处理AMP样式

我在Vue Bootstrap + Nuxt.js（~2.12.2版本）项目中实现AMP功能时，遇到Bootstrap样式自带!important规则导致AMP校验失败的问题。
我找到@buddye/postcss-remove-important插件可以移除样式中的!important规则，全局配置如下可正常运行：

postcss: {
  plugins: {
    '@buddye/postcss-remove-important': {},
    cssnano: { preset: 'default' },
  },
},

我仅需要对amp-custom.scss文件启用该插件，不想全局生效，尝试使用如下函数式配置后运行报错：

plugins: loaderContext => {
    if (/amp-custom.scss$/.test(loaderContext.resourcePath)) {
        return {
            '@buddye/postcss-remove-important': {},
            cssnano: { preset: 'default' },
        };
    }
    
    return { cssnano: { preset: 'default' } };
},

报错截图如下：


请问该问题如何解决，是否有其他方案可以移除Bootstrap中的!important规则？

解决方案 #

方案1：修正postcss函数式配置 #

你遇到的报错是Nuxt2对应版本的postcss-loader对函数式返回对象形式插件的兼容性问题，改为返回插件实例数组即可解决：

1. 先在nuxt.config.js顶部引入依赖

const removeImportant = require('@buddye/postcss-remove-important')
const cssnano = require('cssnano')

2. 修改postcss配置：

postcss: {
  plugins: (loaderContext) => {
    const plugins = [
      cssnano({ preset: 'default' })
    ]
    // 匹配目标文件时插入移除important的插件
    if (/amp-custom\.scss$/.test(loaderContext.resourcePath)) {
      plugins.unshift(removeImportant())
    }
    return plugins
  }
}

方案2：直接通过Bootstrap变量关闭!important（更推荐） #

Bootstrap的工具类!important默认由变量$enable-important-utilities控制，你可以在自己的scss变量文件中添加如下配置，重新编译后就可以移除所有Bootstrap自带的!important规则，无需额外引入postcss插件：

$enable-important-utilities: false;

注意该变量需要在引入Bootstrap源码之前定义才能生效。

内容的提问来源于stack exchange，提问作者mevangelinakis