无法使用 Laravel Mix 在 scss 中 @extend 第三方 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

我强烈建议在您的代码 sn-p 末尾使用!optional。有些类最后需要!optional。