PostCSS 不处理顺风答案

【问题标题】：PostCSS does not process tailwindPostCSS 不处理顺风
【发布时间】：2022-10-15 09:30:06
【问题描述】：

这是使用 Laravel 和 Vite。我已经阅读了有关如何从多个来源执行此操作的指南，虽然似乎有几种不同的方法应该有效，但似乎没有什么会导致 postcss 处理顺风指令。

在 package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.7",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.4.0",
        "lodash": "^4.17.21",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.6",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "amqplib": "^0.10.0"
    }
}

在 vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [ 
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        
    ],
    
});

在 postcss.config.js 中

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在 tailwind.config.js 中

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在资源/css/app.css

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

最后在 app.blade.php

<!DOCTYPE html>
<html land="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
        <title> ISAD </title>
        @vite('resources/css/app.css')

</head>
<body>
    <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

呈现为

<!DOCTYPE html>
<html land="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
        <title> ISAD </title>
        <script type="module" src="http://127.0.0.1:5173/@vite/client"></script><link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css" />
</head>
<body>
    <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

app.css 仍然只包含

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

我可能忽略了一些非常小的东西。

【问题讨论】：

标签： laravel tailwind-css vite postcss

【解决方案1】：

这很可能是因为您的 vite 服务器被广告拦截器阻止了......

通过打开网络选项卡验证，vite 服务器和资产是否返回err_blocked_by_client？

您很可能必须使用广告拦截器将您的 vite 服务器列入白名单...您可以在此处阅读有关此问题的更多信息：https://github.com/laravel/vite-plugin/issues/47

【讨论】：

【解决方案2】：

如果 Vite 正在运行，请尝试重新运行它

Ctrl+C 终止
npm run dev 或 yarn dev

【讨论】：