Tailwind Flowbite Datepicker下拉UI问题，关于“npm run prod”缩小,类未添加到npm run prod的缩小中

vxqlmq5t 于 2023-04-21 发布在其他

关注(0)|答案(2)|浏览(197)

我有一个使用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();
}

npm

来源：https://stackoverflow.com/questions/75946790/tailwind-flowbite-datepicker-dropdown-ui-problem-on-npm-run-prod-minification

2条答案

按热度按时间

toiithl61#

当然，由于元素是在DOM中呈现的，postcss和vite（在你的例子中是laravel-mix）观察器并不知道你需要的类，所以在生产环境中（缩小的css）它永远不会正确显示。
试着把这个放在你的日历代码上面，然后，运行npm run build

<div class="hidden">
    <div class="days">
        <div class="days-of-week grid grid-cols-7 mb-1 dow block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm"></div>
        <div class="datepicker-grid w-64 grid grid-cols-7 block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"></div>
    </div>
    <div class="calendar-weeks">
        <div class="days-of-week flex"><span class="dow h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"></span></div>
        <div class="weeks week block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm"></div>
    </div>
</div>

赞(0）回复(0）举报 2023-04-21

ssgvzors2#

因为我需要一个紧急的生产环境解决方案，除了下载datepicker.min.js并将代码粘贴到刀片文件中的script标签下之外，没有其他选择。
现在运行“npm run prod”时，JS中提到的CSS类也会在缩小时包含在内。
上述解决方法为“工作正常”。
等待其他更好的解决方案谢谢。

赞(0）回复(0）举报 2023-04-21