在我的 Rails 应用程序中，Less::Error `unmatched '/*'`/ Sass::SyntaxError 的原因答案

【问题标题】：cause of Less::Error `unmatched '/*'`/ Sass::SyntaxError in my rails app在我的 Rails 应用程序中，Less::Error `unmatched '/*'`/ Sass::SyntaxError 的原因
【发布时间】：2021-03-01 14:24:12
【问题描述】：

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

使用 npm 包，每当 stylesheet_link_tags 等开始在文档头中加载 fomantic 资产时，我都会得到 Less::Error unmatched '/*'。通过以下两个文件将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 还是其他生成的导入文件之一的问题？
使用 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 时，一切正常。我非常困惑，非常感谢您的帮助。谢谢！

【问题讨论】：

标签： ruby-on-rails less semantic-ui sprockets fomantic-ui

【解决方案1】：

使用 npm 包

Sprockets 似乎不支持来自README 的less

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

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

你可以试试import/dist:

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

使用 sass rails 宝石

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

【讨论】：

是的，我一直在使用/dist，但它不包括一些字体和图标。
re fomantic-ui-sass - gem 和 fomantic-ui-css 无法使用。你不能覆盖任何一个样式:(
从dist 导入是我最初所做的。它可以工作，但无法加载图标。现在我从 CDN 中提取脚本并将 stylesheet_link_tag 放在后面。
import from dist 应该可以工作，有时在这种情况下很难调试，所以使用cdn 还不错。