无法使用Laravel Mix @扩展CSS的第三方CSS框架

问题描述

我正在使用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;
  │     ^^^^^^^^^^^^^^^^^
  ╵

我知道我只是缺少一些琐碎的东西，但是我不知道是什么。

解决方法

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