如何在顺风的其他 Scss 文件中使用 @apply答案

【问题标题】：How use @apply in other Scss files with tailwind如何在顺风的其他 Scss 文件中使用 @apply
【发布时间】：2022-01-16 20:45:23
【问题描述】：

我正在使用 Tailwind，我尝试在 scss 文件上使用 @apply，但 vscode 告诉我“在规则 @apply 上未知”，我向您展示了我的 App.css 文件和我的 css 配置，我阅读了 tailwind 文档关于@Apply 但我不知道，我一定错过了什么

App.css：

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

@import "./unreset.scss";

我的 scss 的一部分：

.unreset {
    a {
      @apply text-blue-700 underline;
    }
    p {
      @apply my-4;
    }
  
    blockquote,
    figure {
      @apply my-4 mx-10;
    }
  
    hr {
      @apply border;
    }
  
    h1 {
      @apply text-4xl font-bold my-2;
    }
  
    h2 {
      @apply text-2xl font-bold my-3;
    }
  
    h3 {
      @apply text-lg font-bold my-4;
    }
  
    h4 {
      @apply text-base font-bold my-5;
    }
  
    h5 {
      @apply text-sm font-bold my-6;
    }
  
    h6 {
      @apply text-xs font-bold my-10;
    }
}

postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('postcss-preset-env')({
      features: { 'nesting-rules': false }
    }),
  ]
}

给你，我编译没有任何问题，只是在我的检查器中，由于@apply，代码没有正确编译。提前感谢您的帮助

【问题讨论】：

标签： reactjs sass tailwind-css postcss

【解决方案1】：

可能有 2 个问题：

不要导入@import "./unreset.scss"; 试试@import "unreset";。
在 postcss.config.js 中，将插件配置导出为对象而不是数组。

module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss': {},
        'tailwindcss/nesting': {},
        'autoprefixer': {},
    }
};

【讨论】：