Laravel Tailwind PostCSS 问题

Posted 2023-03-07

【中文标题】Laravel Tailwind PostCSS 问题

【英文标题】：Laravel Tailwind PostCSS issue

【发布时间】：2021-11-01 11:10:57

【问题描述】：

我的 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')],
;

【参考方案1】：

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

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

【讨论】：

我只按照 Tailwinds 文档所说的方式做了所有事情，我还在 Udemy 和 YouTube 上观看了多门课程，他们也都选择了这条路线，没有任何问题。 Tailwinds laravel 文档声明它需要 webpack.mix.js 文件中的 .postcss 部分......另外，我确实有 ```` @tailwind base; @tailwind 组件； @tailwind 实用程序； ```` 在我的 app.css 中

从webpack.mix.js 删除需要。您需要 post.css 中的 post.css

这是由于文档说明这样做，如果我不在那里包含 postcss，它永远不会运行，并且 css 使用所有类和 JS 构建，使文件比需要的大得多。 .. 我需要 postcss 才能运行...