Question

当我运行 npm run dev 时，它显示了我的 TailwindUI 组件的正确输出：

但是当我运行 npm run prod 时，它不再识别所有颜色。

怎么了？

这是我的 tailwind.config.js 的配置：

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter var", ...defaultTheme.fontFamily.sans],
            },
            colors: {
                "yellow-50": "#FFEDCC",
                "yellow-100": "#FFDEA3",
                "yellow-200": "#FFD07A",
                "yellow-300": "#FFC152",
                "yellow-400": "#FFB329",
                "yellow-500": "#FFA400",
                "yellow-600": "#D48902",
                "yellow-700": "#AA6F03",
                "yellow-800": "#815404",
                "yellow-900": "#583A04"
            },
        },
    },
    purge: [
        "./storage/framework/views/*.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    variants: {
        extend: {
            opacity: ["disabled"],
        },
        backgroundColor: ["responsive", "hover", "group-hover"],
        textColor: ["responsive", "hover", "group-hover"],
    },
    plugins: [
        require("@tailwindcss/forms"),
    ],
};

还有webpack.mix.js：

const mix = require("laravel-mix");


const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
    .vue()
    .sourceMaps()
    .postCss("resources/css/app.css", "public/css", [
        tailwindcss("./tailwind.config.js"),
    ]);

const webpack = require("webpack");

mix.webpackConfig({
    plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: true,
        }),
    ],
});

可能是 PostCSS 选项出了问题，但是什么？该视图位于 resources/js/views/Dashboard.vue。

Answer 1

如果您的配置在开发中运行良好，而在生产中运行不正常，则意味着您的 package.json 文件中存在错误。

您已经在 devDependencies 中包含了任何文件，这就是它在开发阶段工作的原因。当您进入生产级别时，它无法识别添加到 devDependencies 中的包。

因此，将生产中所需的所有包从项目的 devDependencies 移至项目的 dependencies。

npm run prod 和 dev

1 个答案: