因为需求原因，给项目上了一个 lightgallery 的 jquery 插件， 这个插件在 https://ruby-china.org/topics/40720 这个帖子的一番操作之后，跑 rails s 查看是一点问题没有的

但是今天在部署的时候发现，似乎线上环境 lightgallery 并没有正常工作：控制台并没有报错，只是图片并没有出现在 modal 窗口，而是以 basic 的格式出现在了网页最末。

这是一个典型的 css 没有加载的问题。但是奇怪的是，其他的 css 却都加载了

@import "toastr/toastr.scss";  // 正常输出了

$lg-path-images: '~lightgallery/src/img'; // 正常输出了图片
$lg-path-fonts: '~lightgallery/src/fonts'; // 正常输出了字体
@import 'lightgallery/src/sass/lightgallery.scss';  //神奇的消失了

.margin-right-5 {  // 正常输出了
  margin-right: 5px;
}

但是在 development 环境下 却都正确的输出了，是个典型的环境问题，于是 全局搜索 production ，看是否有特殊的配置 最后发现问题来自于 postcss.config.js

之前在搞 tailwindcss 的时候，因为原始的 css 非常大，所以抄着 gorails 里的文章，上了一个 css 的裁剪功能：

let environment = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}
if (process.env.RAILS_ENV === "production") {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/*.html.erb',
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js',
        './app/javascript/**/*.vue',
        './app/javascript/**/*.jsx',
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}
module.exports = environment

因为在所有的项目代码里（参考 content）都没有明确的使用过 lightgallery 的 css，所以此时他的 css 是被裁剪掉了的。 解决的问题很简单，就是在 defaultExtractor 前面添加 whitelistPatterns 选

因为项目还使用了 dropzone , 所以最后这块写的是 whitelistPatterns: [/dz.*/, /lg.*/],

部署后发现问题解决了

总结：

1. 在使用裁剪 css 的时候，特别需要注意，如果有引用的组件使用了 css，且这些 css 最后由 控件的 js 生成，而不是自己的代码逻辑生成，建议找到这些 css 的规律，将其添加至白名单
2. 如果遇到 development 和 production 不一致的问题，建议搜索下 production 或者 development 关键字，找下文件，看下是不是之前有些区别对待给自己埋坑