@apply 不能与 `.bg-blue` 一起使用，因为 `.bg-blue` 要么找不到，要么它的实际定义包含伪选择器答案

【问题标题】：@apply` cannot be used with `.bg-blue` because `.bg-blue` either cannot be found, or its actual definition includes a pseudo-selector@apply 不能与 `.bg-blue` 一起使用，因为 `.bg-blue` 要么找不到，要么它的实际定义包含伪选择器
【发布时间】：2019-10-24 17:48:52
【问题描述】：

我正在尝试在我的 sass 文件中使用 @apply，当我执行 npm run dev 或 npm run watch 时，标题中出现错误。我正在使用 Laravel，并使用 Laravel Mix。这是我的 webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });

这存在于我的 app.css 中

...
.bg-blue {
  background-color: #47cdff;
}

我的 app.scss：

// Tailwind CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

// Custom CSS
.section {
    @apply .px-4;
}

.button {
    @apply .bg-blue .text-white .no-underline .rounded-lg .text-sm .py-2 .px-5;
    box-shadow: 0 2px 7px 0 #b0eaff;
}

【问题讨论】：

这可能对你有帮助.. github.com/tailwindcss/tailwindcss/issues/396
你用的是什么版本的tailwindcss？
@RossWilson v1.0.3
您是否显示了整个app.scss 文件，您的示例中没有任何包含？您如何将.bg-blue 添加到您的 CSS 中？
这就是我的整个 app.scss。我的按钮有 button 类，你可以在我的 app.scss 中看到，它也应该从我的 app.css 文件中应用 bg-blue

标签： laravel laravel-mix tailwind-css

【解决方案1】：

只需覆盖默认的调色板，您可以使用tailwind.config.js 文件的theme.colors 部分：

  theme: {
    colors: {
      white: '#FFFFFF',
      blue: '#007ace',

    }
  }

那么一个简单的技巧就是永远不要在同一个文件中混合常规 CSS 和导入。相反，为您的导入创建一个主入口点文件，并将所有实际的 CSS 保存在单独的文件中。

【讨论】：