因为需求原因， 给项目上了一个 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 关键字， 找下文件， 看下是不是之前有些区别对待给自己埋坑