文章/答案/技术大牛

发布

社区首页 >问答首页 >PostCSS不处理顺风

问PostCSS不处理顺风
EN

Stack Overflow用户

提问于 2022-07-15 11:25:47

回答 2查看 816关注 0票数 2

这是用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;

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

tailwind-css

vite

postcss

laravel

回答 2

Stack Overflow用户

发布于 2022-07-16 23:20:14

这很可能是因为您的vite服务器正被一个阻止程序阻止.

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

你很可能不得不用你的阻止器白名单你的vite服务器..。您可以在这里阅读更多有关此问题的内容：https://github.com/laravel/vite-plugin/issues/47

票数 1

Stack Overflow用户

发布于 2022-10-15 01:30:06

如果它正在运行，就试着重新运行Vite

Ctrl+C到terminate
npm run dev或yarn dev

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72993252

复制

相似问题

问PostCSS不处理顺风
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PostCSS不处理顺风EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PostCSS不处理顺风
EN