CSS 在生产环境中无法使用 Laravel Mix 5

Question

这是我的 Laravel + Vue SPA 应用程序。

我有这个 Laravel 混合配置文件：

const path = require('path');
const fs = require('fs-extra');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-bundle-analyzer');

function publishAssets() {
    const publicDir = path.resolve(__dirname, './public');

    if (mix.inProduction()) {
        fs.removeSync(path.join(publicDir, 'dist'));
    }

    fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'));
    fs.removeSync(path.join(publicDir, 'build'));
}

mix.js('resources/js/app.js', 'public/dist/js')
    .sass('resources/sass/app.scss', 'public/dist/css').options({
        postCss: [tailwindcss('./tailwind.config.js')],
        processCssUrls: false,
    });

// alias the ~/resources folder
mix.webpackConfig({
    plugins: [
        // new BundleAnalyzerPlugin()
    ],

    resolve: {
        extensions: ['.js', '.json', '.vue'],
        alias: {
            '@': `${__dirname}/resources`,
            '~': path.join(__dirname, './resources/js'),
            ziggy: path.join(__dirname, './vendor/tightenco/ziggy/dist/js/route.js'),
        },
    },

    output: {
        chunkFilename: 'dist/js/[chunkhash].js',
        path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build'),
    },
});

mix.then(() => {
    if (!mix.config.hmr) {
        process.nextTick(() => publishAssets());
    }
});

它在 npm run watch 上工作正常，但是当我在 npm run production 上工作时，CSS 不起作用。该网站加载并运行，但缺少 CSS。

任何人都可以看到我的代码中的原因吗？

这是我的 spa.blade.php:

<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">

...

<script src="{{ mix('dist/js/app.js') }}"></script>

在 Chrome 开发工具的网络选项卡中，CSS 文件在开发环境中为 270kb，在生产环境中为 42kb。

翻译有误。

Answer 1

我暂时称此问题已解决，因为我的网站已开始运行。

导航非常困难，因为我在开发分支上工作了 6 个月，并且它通过 npm run watch 工作。当我合并到 master 时，npm run production 加载不正确——样式一半存在一半丢失。

解决方案是从 tailwindcss@1.9 降级到 tailwindcss@1.4。

一路上，我阅读了一些关于 postcss 的内容，或者一些无法使用 npm run production.

上的 --no-progress 标志的内容

有人可以尝试删除该标志，但我已经降级了 tailwind，所以我没有尝试。

Answer 2

在我的例子中，这是由于在 tailwindcss 配置文件中设置了错误的属性“清除”。

当我运行 "npm 运行 hot" 或 "npm 运行 dev" 时，网站没问题。但是当我运行 “npm 运行 prod” 时它坏了。开发模式似乎忽略了属性“清除”。

CSS 在生产环境中无法使用 Laravel Mix 5

CSS isn't working in production environment with Laravel Mix 5

laravel

vuejs2

laravel-mix