Laravel 未知规则 @tailwindcss(unknownAtRules)
cal*_*ani 1 laravel tailwind-css
我安装了一个新的 Laravel 项目。我想使用 Tailwind CSS 并严格按照 Tailwind 网站的说明进行操作。当我运行时npm run dev，我的 resources/css/app.css 文件没有填充 Tailwind 规则，而且我仍然只有三个：
@tailwind base;
@tailwind components;
@tailwind utilities;
规则 @tailwindcss(unknownAtRules) 处有“未知”警告。我观看了一个视频，该视频中的人运行了 npm dev，并且 app.css 文件充满了由 Tailwind CSS 填充的规则。
这是我的资源目录结构
tailwind.config.js
module.exports = {
content: [
"./storage/framework/views/*.php",
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: { extend: {} },
plugins: [],
};
刀片/视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add A Post</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
@yield('content')
</body>
</html>
webpack.mix.js
const mix = require("laravel-mix");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js("resources/js/app.js", "public/js").postCss(
"resources/css/app.css",
"public/css",
[require("tailwindcss")]
);
有人可以帮助我使用 Tailwind 并继续该项目吗？
作曲家.json
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
"php": "^8.0.2",
"fruitcake/laravel-cors": "^2.0.5",
"guzzlehttp/guzzle": "^7.2",
"laravel/framework": "^9.0",
"laravel/sanctum": "^2.14",
"laravel/tinker": "^2.7"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^6.1",
"phpunit/phpunit": "^9.5.10",
"spatie/laravel-ignition": "^1.0"
},
"autoload": {
"psr-4": {
"App\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi --force"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
包.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.23"
},
"dependencies": {
"postcss-import": "^14.0.2"
}
}
我也遇到了同样的问题，通过交换解决了
@tailwind base;
@tailwind components;
@tailwind utilities;
和
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
并重新运行
npm run dev
小智 5
“如果您在 VSCode 中工作，则需要禁用unknownAtRules 的 lint 规则。
建议修复：
在项目的根目录下创建 .vscode
如果不存在，则创建名为 settings.json 的文件（默认情况下，现代版本的 VS Code 附带 settings.json 文件）。
确定您正在使用的文件类型，例如 css 或 scss
创建一个空的 json 对象 {}
在 json 对象内添加，
[FILE EXTENSION OF STEP 3].scss.lint.unknownAtRules": "ignore"
以下是使用 scss 扩展名时文件的样子：
.vscode > 设置.json
{
"scss.lint.unknownAtRules": "ignore"
}
它可以帮助您推动 git 中的更改并与团队共享修复程序。
第二种方式：
在 VSCode Global settings.json 中执行与上述相同的操作。它会为您解决问题，但不会为使用相同代码库的其他人解决问题。您可以使用以下命令打开该文件
Cmd+Shift+P
然后选择“首选项：打开设置 (JSON)”。 通常，它会立即解决问题，但如果需要，您可以重新加载浏览器。
修复：供 vue 使用"css.lint.unknownAtRules": "ignore"。致谢=>@zijizhu"
| 归档时间： |
|
| 查看次数： |
3904 次 |
| 最近记录： |