导致 Less::Error `unmatched '/*'`/ Sass::SyntaxError 在我的 rails 应用程序中的原因

问题描述

我刚刚从语义 UI 切换到在我的 Rails 应用中由社区维护的 Fomantic UI，并且在使用 npm package 或 sass rails gem 时遇到了两个模糊错误之一。

1. 使用 npm 包，每当 Less::Error unmatched '/*' 等开始在文档头部加载语义资产时，我都会得到 stylesheet_link_tags。 fomantic样式和js通过以下两个文件拉入我的项目：

   application.css.scss

   *= require 'semantic-ui/src/semantic

   application.js

   //= require semantic-ui/dist/semantic

   我注意到当我从 semantic-ui/dist 加载样式表和 js 时它会起作用。但是，这样做排除了很多。图标停止工作。存储在 semantic-ui/src 中的相关文件是 semantic.less。存储在 semantic-ui/dist 中的相关文件是 semantic.min.css（我不需要，除了刚才切换事物来解决这个问题时）和 semantic.min.js （我确实需要）。

   同样，如果我需要 semantic-ui/dist 中的缩小样式表，它“有效”，如果我需要 semantic-ui/src 中的 semantic.less 文件，它“无效” .这是 semantic.less 或其他生成的导入文件之一的问题吗？

2. 使用 sass rails gem，我得到一个 Sass::SyntaxError Invalid CSS after "i.icon.stopwatch.": expected class name,was "20:before"。

   查看 source，我看到许多这样的声明：i.icon.stopwatch.20:before {content: "\f96f";}。

   为什么那会抛出错误？

这是否意味着 npm 包和 gem 具有无效的 css 或我的应用程序编译不正确？我对使用 npm 包或 gem 没有意见，我只是想让它工作。当我使用旧的语义 UI 时，一切正常。我非常困惑，非常感谢您的帮助。谢谢！

解决方法

1. 使用 npm 包

似乎链轮不支持来自 README 的 less

Sprockets ... 允许您使用 CoffeeScript、Sass 和 SCSS 等语言编写资产。

所以你不能使用 /src 目录。

您可以尝试import /dist：

# application.css.scss
import 'semantic-ui/dist/semantic'

2. 使用 sass rails gem

这是来自 Fomantic-UI 的错误已修复，但尚未更新至 Fomantic-UI-SASS