无法在带有Laravel Mix的scss中@扩展第三方css框架

Question

我正在做一个带有Tailwind Css框架的Laravel项目。

我不是一个前端开发人员，我是一个后端人员，所以现在我只包含了Tailwind css并使用了它的类，但这导致我有一些元素和很多类来定义样式，最后是一个动作消息div，最终拥有了所有这些类：

absolute bg-green-100 top-10 h-15 w-64 p-4 text-right rounded-md border-l-4 border-green-500

因此，我决定学习一点scss，足以摆脱这些情况。

我把我的test.scss做为

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.action-message-success {
    @extend .absolute;
    @extend .bg-green-100;
    @extend .top-10;
    @extend .h-15;
    @extend .w-64;
    @extend .p-4;
    @extend .text-right;
    @extend .rounded-md;
    @extend .border-l-4;
    @extend .border-green-500;
}

在我的webpack.mix.js中，我刚刚添加了

.sass('resources/css/test.scss', 'public/css')

但是在编译时，我得到了错误

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend .absolute !optional" to avoid this error.
  ╷
6 │     @extend .absolute;
  │     ^^^^^^^^^^^^^^^^^
  ╵

我知道我只是错过了一些琐碎的东西，但我不知道是什么。

Answer 1

我强烈建议在代码片段的末尾使用!optional。有些类在最后需要!optional。