Laravel Tailwind PostCSS 问题

Question

我的 Laravel 应用有问题，我正在使用 TailWindCSS 构建应用以进行样式设置。

但是，每当我尝试运行 npm run dev 命令时，它都会执行清除未使用的 CSS 以减小文件大小的循环（我相信你们都知道它的作用：P）

但是，在它完成之前，它会出现以下错误消息（开头的“}”上方只是我认为正在清除的 css 类）：

} is not a PostCSS plugin
    at Processor.normalize (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\processor.js:63:15)
    at new Processor (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\processor.js:10:25)
    at postcss (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\postcss.js:26:10)
    at LazyResult.runOnRoot (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\lazy-result.js:339:16)
    at LazyResult.runAsync (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\lazy-result.js:391:26)
    at async Object.loader (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss-loader\dist\index.js:97:14)
    at processResult (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\webpack\lib\NormalModule.js:721:19)
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\webpack\lib\NormalModule.js:827:5
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss-loader\dist\index.js:142:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
(node:6980) UnhandledPromiseRejectionWarning: Error: spawn ENAMETOOLONG
    at ChildProcess.spawn (internal/child_process.js:403:11)
    at spawn (child_process.js:667:9)
    at Object.execFile (child_process.js:319:17)
    at Object.module.exports.fileCommand (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\node-notifier\lib\utils.js:76:13)
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\node-notifier\notifiers\toaster.js:145:11
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6980) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

现在，如果我从我的 webpack.mix.js 中注释掉 require('postcss')，它会生成没有错误。我还尝试使用 postcss-import，它的构建也很好，但实际上并没有删除任何未使用的 CSS。

这是 webpack.mix.js 的 .postCss 部分：

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
        require('postcss'),
        require('autoprefixer'),
    ]);

最后是我的 TailWindCSS 配置：

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

module.exports = {
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

Answer 1

您不应该将 tailwindcss 添加为这样的插件。只需将该代码放入您的 app.css 中即可。并从webpack.mix.js 删除需求。

@tailwind base;
@tailwind components;
@tailwind utilities;