0

我正在设计一个 Hanami 项目，我正在使用 W3.CSS。我有一大堆样式相同的实体，所以我不想在一百个文件中拥有无数相同的样式，而是想使用 LESS 来组合 W3.CSS 样式，这样如果需要更改，我只需要在一个位置实施它们。

经过数小时的 Google 阅读后，我使用 therubyracer 和较少的 gems 来工作。

这是我的工作示例styles.css.less文件：

@import (less) "w3.css";
@import (less) "w3-theme-blue.css";

.test-combined-container {
  .w3-container();
  .w3-card();
}
.test-center {
  .w3-center();
  .w3-theme();
}

这行得通。

但是，我注意到一个问题，特别是像w3-striped、w3 -bordered 、 w3 -hoverable、w3-hover-theme和w3-row这样的类。使用这些类时，LESS 说它照常完成，但也会抛出以下错误：

GET http://localhost:2300/assets/godmode/styles.css net::ERR_ABORTED 500（内部服务器错误）

我怀疑问题出在伪类的使用上，但事实证明这是错误的。

我尝试了以下方法：

我尝试将 W3.CSS 样式表作为 css 和内联导入。这没有用。

接下来我测试了“w3-theme-blue.css”中的“w3-hover-theme”类。

我尝试在导入声明之前和之后添加空的 w3-hover-theme 类。没有错误，但未应用悬停。

我尝试在外部 css 中添加空的 w3-hover-theme 类并导入它。没有错误，但未应用悬停。

在第一次使用该类和 :hover 伪类之前，我尝试在 w3-theme-blue.css 文件中添加空的 w3-hover-theme 类。没有错误，但未应用悬停。

我重新测试了“颜色：红色；” 在 w3-hover-theme 类中，并且已应用，但悬停仍然不起作用。

所以我补充说：

.test-center:hover {
  color: green;
}

显然，这让悬停起作用，但这有点违背了目的。

谁能指出我正确的方向，具体问题可能是某些课程在 Hanami 中破坏 LESS 以及如何解决/解决它？

编辑：有人建议这个问题是重复的。它不是。建议的帖子完全处理 LESS，我正在尝试将 W3.CSS 类与 LESS“合并”，我遇到的问题是它适用于某些类，但不适用于其他类。我正在扩展测试，但还没有得到积极的结果。

4

0 回答 0