PostCSS 8如何排除指定文件？搭配TailwindCSS解析node_modules CSS报错问询

Nuxt 项目配置（适配你当前的报错场景） #

你当前的报错来自Nuxt内置的postcss8模块，可通过以下两种方式修复：

• 方法1：为postcss-loader全局添加排除规则，修改nuxt.config.js：

export default {
  build: {
    postcss: {
      loader: {
        postcssOptions: {
          // 仅排除出问题的@fullcalendar包CSS，不影响其他依赖处理
          exclude: [/node_modules\/@fullcalendar/],
          // 若需要全局排除所有node_modules下的CSS，可替换为下方配置
          // exclude: [/node_modules/]
        }
      }
    },
    // 可选补充：若配置后仍有打包异常，添加transpile排除规则
    transpile: [
      ({ isServer }) => !isServer && '@fullcalendar'
    ]
  }
}

• 方法2：单独为报错来源插件postcss-custom-properties配置排除规则，修改nuxt.config.js：

export default {
  build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': {
          exclude: [/node_modules\/@fullcalendar/],
        },
        tailwindcss: {},
        autoprefixer: {}
      }
    }
  }
}

通用 Tailwind + PostCSS 项目配置 #

如果是非Nuxt项目，可通过以下方式配置：

• 修改项目根目录下的postcss.config.js：

module.exports = {
  plugins: {
    'postcss-custom-properties': {
      exclude: [/node_modules\/@fullcalendar/]
    },
    tailwindcss: {},
    autoprefixer: {},
  }
}

• 若使用webpack自定义打包配置，可在webpack配置中为postcss-loader添加排除规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: [/node_modules\/@fullcalendar/],
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

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