После того, как webpack(проект Nextjs 10) изменит ошибки попутного ветра
До изменений все собиралось строить и все работало.
мой next.config.js //
// const withCss = require('@zeit/next-css');
// const withSass = require('@zeit/next-sass');
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
}
const nextConfig = {
...
};
module.exports = withPlugins([
// [ withSass, {} ],
// [ withCss, {} ],
[ withPurgeCss, {
...
}
], nextConfig);
Далее, как рекомендовано, я решил отказаться от использования устаревших @ zeit / next-css и @ zeit / next-sass.
Я добавил файл tailwind.config.js, как написано на их веб-сайте:
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
И внес изменения в post.config.js, а также установил недостающие пакеты:
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
'postcss-preset-env': { stage: 2 },
},
};
В _app.js я включаю файл main.scss:
@import "tailwindcss/preflight";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
.self-class {
@apply .bg-olive .shadow-olive .text-base .text-white .font-bold;
}
Я получаю сообщение об ошибке:
Error: Syntax error: /home/roma/project/main.scss
@применять
cannot be used with
.bg-оливковый
because
.bg-оливковый
either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that
.bg-оливковый
exists, make sure that any
@Импортировать
statements are being properly processed *before* Tailwind CSS sees your CSS, as
@применять
can only be used for classes in the same CSS tree.
Мой файл tailwind.config.js настроен неправильно или файл в целом построен неправильно? Так где я пытаюсь сослаться на стили попутного ветра, о них еще не известно?
Спасибо за любую помощь!