Я использую попутный ветер с laravel mix и post css. Я получаю сообщение об ошибке:
@apply
нельзя использовать с .text-grey-default
, потому что .text-grey-default
либо не может быть найден, либо его фактическое определение включает псевдоселектор, например: hover,: active, et c . Если вы уверены, что .text-grey-default
существует, убедитесь, что все операторы @import
правильно обрабатываются до того, как Tailwind CSS увидит ваш CSS, поскольку @apply
может использоваться только для классов в том же дереве CSS.
Я думал, что это потому, что он не находится в том же файле CSS, но я использую post css -import, чтобы преодолеть это. В теле тега нет псевдоселектора, и весь импорт находится в верхней части файла. Я действительно не могу понять, откуда эта проблема и как ее решить.
app.s css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "variables";
@import url("https://fonts.googleapis.com/css?family=Nunito");
@import "@fortawesome/fontawesome-free/css/all.min.css";
body {
@apply text-grey-default;
}
webpack.mix . js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let atImport = require('postcss-import');
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [
atImport(),
tailwindcss("./tailwind.config.js"),
]
})
.version();
tailwind.config. js
let colors = {
"grey-default": "#636b6f",
};
module.exports = {
colors: colors,
textColors: colors,
options: {
prefix: "",
important: false,
separator: ":"
}
};