css - 将 semantic-ui 的 less 文件包含到现有的构建系统中

Question

我们有一个元素使用 less 作为 css 预处理器，less 文件是使用 express-less 编译的。我们没有使用 ui 库，所以我们想尝试语义。我们遇到的一个问题是我们想将它包含在我们的构建系统中(我们正在使用 express 构建 css)。有一个写得很好的 article关于如何使用和构建语义，但没有关于如何将其插入现有元素的信息。

我们的目标是能够通过 theme.config 文件指定要包含的组件，然后将所有必需的 *.less 文件导入到主文件中(就像您在使用 bootstrap 时所做的那样)。

我们尝试简单地创建 theme.config 文件并将其导入我们的应用程序，但编译器提示 @type 变量未定义。我真的不知道这个 var 中应该有什么，但似乎我们缺少一些其他配置文件。

我们也尝试在 Semantic 的 IRC 上询问，但没有人回答。

是否有使用 semantic-ui 但不使用 gulp 或预构建 css 的解决方案？

Answer 1

src/definitions 中的行为、集合、元素、全局变量、模块和 View 定义了您缺少的@type。

您应该将每个行为、集合、元素、全局、模块或 View 彼此独立地导入到您的元素文件中。

例如:

@import "./definitions/modules/rating";

注意 rating.less 文件导入了你的@import '../../theme.config';文件并加载您的主题设置(通过 ../../theme.less)；

当你只下载了 semantic-ui 源代码，没有运行 gulp install。 '../../theme.config' 还不存在。您可以使用 theme.config.example 作为示例自己创建一个“../../theme.config”文件。