4

问题：

我将 11ty 与 Tailwind 和 Sass 一起使用。每当我在 .scss 文件（例如.class { @apply sm:flex }）中使用 Tailwind 状态变体类时，它都会否定整个 CSS 规则，包括用它声明的所有其他类。

我希望能够在 .scss 文件中为@applyTailwind 状态变体类（sm:*, hover:*, 。group-hover:*

背景：

我使用 11ty 和 Tailwind 开始了我的项目。我可以@apply毫无问题地编写这样的 Tailwind 状态变体类：

.class {
  @apply flex sm:flex-col;
}

这将定义display: flex;宽屏幕和flex-direction: column;小屏幕尺寸的定义（我翻转了 Tailwind 的移动优先方法，请不要判断:)）。

一切正常，但我想要嵌套和其他一些 Sass 功能，所以我安装了这个 Sass 插件。之后，我仍然可以像这样在@apply没有 a 的情况下进行 Tailwind 类:：

.class {
  @apply flex p-6 m-6;
}

这 ^^ 按预期输出。但是，当我添加一个带有 a 的类时:，它会否定整行。

.class {
  @apply flex p-6 m-6 hover:bg-white;
}

该行不输出任何内容。不会产生构建错误。不为.class. 所有没有状态变体类的 CSS 声明以及站点的其余 HTML/JS 都会成功输出。

在许多情况下，我可以以不同的方式定义事物，例如：

.class {
  @apply flex p-6 m-6; 

  &:hover {
    @apply bg-white;
  }
}

这个 ^^ 工作得很好。

我也可以直接在标记中使用 Tailwind 类：

<div class=“flex p-6 m-6 hover:bg-white”&gt;</div>

虽然我可以使用这两种技术走得很远，但仍有一些地方@apply对 .scss 文件中的状态变体非常有用。

也许我不正确地配置了 Sass 插件？JS 不是我的强项。eleventy.js这是我文件的相关位：

const pluginTailwind = require('eleventy-plugin-tailwindcss');
const pluginSass = require("eleventy-plugin-sass");

module.exports = (config) => {
  config.addPlugin(pluginTailwind, {
    src: 'src/assets/css/*'
  });
  config.addPlugin(pluginSass, {
    outputDir: './'
  });
};
4

0 回答 0