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

你不应该像那样添加一个尾风插件。只需将该代码放入app.css即可。和delete需要从webpack.mix.js中删除。

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