我有一个使用Tailwind CSS的Laravel项目,我还使用了Flowbite Datepicker,使用CDN来包含Datepicker JavaScript。
项目运行良好,日期选择器显示良好。但是当我运行npm run prod来缩小项目时,日期选择器下拉列表显示不正确。
包括图像和代码。
请帮忙。
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/datepicker.min.js"></script>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg ....</svg>
</div>
<input id="date" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy"
name="date" type="text" readonly="readonly" required autofocus class="form-input
shadow-outline-gray text-sm pl-10 w-full @error('date') bg-red-500 @enderror" placeholder="Select Date">
</div>
DEV
中的图像
生产中的图像
webpack.mix.js
const mix = require('laravel-mix');
mix
.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('postcss-nested'),
require('autoprefixer'),
]);
if (mix.inProduction()) {
mix
.version();
}
2条答案
按热度按时间toiithl61#
当然,由于元素是在DOM中呈现的,postcss和vite(在你的例子中是laravel-mix)观察器并不知道你需要的类,所以在生产环境中(缩小的css)它永远不会正确显示。
试着把这个放在你的日历代码上面,然后,运行
npm run build
ssgvzors2#
因为我需要一个紧急的生产环境解决方案,除了下载datepicker.min.js并将代码粘贴到刀片文件中的script标签下之外,没有其他选择。
现在运行“npm run prod”时,JS中提到的CSS类也会在缩小时包含在内。
上述解决方法为“工作正常”。
等待其他更好的解决方案谢谢。