webpack - npm run prod 和 dev 中的 TailwindUI 差异
问题描述
当我运行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
.
解决方案
如果您的配置在开发中运行良好而不是在生产中,则意味着您的package.json
文件中有错误。
您已将任何文件包含在其中devDependencies
,这就是它在开发阶段工作的原因。当您进入生产级别时,它无法识别软件包,因为它们被添加到devDependencies
.
因此,将生产中所需的所有包从项目devDependencies
移到dependencies
项目中。