因为需求原因, 给项目上了一个 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.*/],
部署后发现问题解决了
总结: