不能在SCSS文件顺风nextjs项目中使用@Apply中的自定义类吗?

本教程将介绍不能在SCSS文件顺风nextjs项目中使用@Apply中的自定义类吗?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

不能在SCSS文件顺风nextjs项目中使用@Apply中的自定义类吗? 教程 第1张

问题描述

我正在尝试使用自定义类overflow:inherit作为tailwindnext.js项目中的@apply overflow-inherit,但它引发错误。但是,我可以@apply@apply flex flex-col md:h-full h-screen;这样预先构建顺风类,但不能自定义。

完全回购:https://github1s.com/GorvGoyl/Personal-Site-Gourav.io

trawind.scss

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

@layer utilities {
  @variants responsive {
 .overflow-inherit {
overflow: inherit;
 }
  }
}

project.module e.scss

.css {
  :global {
 .wrapper-outer {
@apply overflow-inherit; //trying to apply custom utility
 }
  }
}

错误:

wait  - compiling...
event - build page: /next/dist/pages/_error
error - ./layouts/css/project.module.scss:4:6
Syntax error: C:Users1gourPersonal-Siteproject.module.scss The `overflow-inherit` class does not exist, but `overflow-hidden` does. If you're sure that `overflow-inherit` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  2 |:global {
  3 |  .wrapper-outer {
> 4 | @apply overflow-inherit;
 |^
  5 |  }
  6 |}

postcss.config.js:

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

    "下一步":"^10.0.7",

    "trawincss":"^2.0.3",

    "sass":"^1.32.8",

    "Postcss":"^8.2.6",

推荐答案

我在我的Laravel项目中遇到了同样的问题。

我认为postcss对我来说是不够的。因此,在webpack.mix.js中,我删除了以下

mix.postCss('resources/css/app.css', 'public/css', [
 require('postcss-import'),
 require('tailwindcss'),
 require('autoprefixer'),
]);

并将其替换为sass,如下所示

mix.sass("resources/css/app.scss", "public/css").options({
 postCss: [
  require('postcss-import'),
  require('tailwindcss'),
  require('autoprefixer'),
 ], });

现在,我有很多很酷的功能,包括您想要的

我甚至不需要使用@layer

在我的SCSS文件中,我可以组合@apply@extend,它可以工作

.btn-my-theme{
 @apply rounded border py-2 px-3 shadow-md hover:shadow-lg;
}

.btn-my-primary{
 @extend .btn-my-theme;
 @apply text-blue-600 bg-blue-200 hover:bg-blue-100 border-blue-500;
}

.btn-my-secondary{
 @extend .btn-my-theme;
 @apply text-gray-600 bg-gray-200 hover:bg-gray-100 border-gray-500;
}

好了关于不能在SCSS文件顺风nextjs项目中使用@Apply中的自定义类吗?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。