无法加载Rails样式表中的语义UI。 解析值时出现很多错误
我正在开发一个使用Semantic UI作为其前端框架的Rails应用程序。
我正在使用Rails 5。
我按照本网站上的说明（ https://github.com/Semantic-Org/Semantic-UI-Rails-LESS ）来包含Semantic在Rails上工作所需的gem。
在我的html.erb文件（照片的左侧部分）中，我使用了一些语义UI按钮，只是为了测试语义是否加载。
我相信它已加载，但我在我的控制台中遇到了一堆错误（+它在右上角说无法加载样式表）。
什么似乎是问题？
编辑
通过将我的’sprockets’gem版本降低到3.6.3而不是3.7.1，我能够删除’样式表无法加载’错误。 （但我不确定这是否是一种安全的方法。在链轮中警告已弃用的方法，因此人们建议使用版本3.6.3。）但是，控制台日志中的其他错误仍然存在。
编辑2
“样式表无法加载”错误仍然存在。
编辑3
我切换到Semantic UI的sass版本，并且“样式表无法加载”错误现在消失了！ 但是，控制台仍然存在“解析值时出错”错误。 我仍然不知道造成这种情况的原因。 有什么想法/修复吗？
从Rails 5.1开始，您可以使用yarn将Semantic UI与您的应用程序集成。 这是我如何做到的。 进程并不完美（您仍然需要在更改主题文件后运行rails tmp:clear ），但它使您可以使用最新的semantic-ui包并且不依赖于gem更新。
运用
- Ruby：2.5.1
- Rails：5.2.0
创建一个新的rails应用程序
$ rails new semantic_integration $ cd semantic_integration $ bundle install
在app目录中创建semantic.json
{ "base": "app/assets/semantic/semantic-ui", "paths": { "source": { "config" : "src/theme.config", "definitions" : "src/definitions/", "site" : "src/site/", "themes" : "src/themes/" }, "output": { "packaged" : "dist/", "uncompressed" : "dist/components/", "compressed" : "dist/components/", "themes" : "dist/themes/" }, "clean" : "dist/" }, "permission": false, "autoInstall": true, "rtl": false, "version": "2.3.1" }
run $ yarn add semantic-ui 。 这将在app/assets/semantic安装semantic-ui
config/initializers/assets.rb添加到config/initializers/assets.rb
# semantic-ui assets Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic') Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic', 'semantic-ui', 'src', 'themes', 'default')
添加语义UI css
// app/assets/stylesheets/application.css *= require 'semantic-ui/src/semantic'
添加语义UI js
// app/assets/javascripts/application.js // after turbolinks //= require jquery //= require semantic-ui/dist/semantic
添加init.js并在app/assets/javascripts/application.js要求它
window.App || （window.App = {}）;
App.init = function() { // here goes Semantic UI component initialisation // ie $('.ui.menu .ui.dropdown').dropdown({ on: 'hover' }); $('.ui.menu a.item') .on('click', function() { $(this) .addClass('active') .siblings() .removeClass('active'); }); }; $(document).on('turbolinks:load', function () { App.init(); });
在你的Gemfile中添加：
gem 'therubyracer' gem 'less-rails'
并运行bundle install
现在你的app应该能够编译Semantic UI更少的文件。
如果你收到错误：
expected ')' got 'o'
转到app/assets/semantic/semantic-ui/src/theme.less并删除@import语句中的(optional)关键字
图标字体
转至： app/assets/semantic/semantic-ui/src/site/globals/site.variables并添加：
/* Fonts */ @fontPath : "assets/fonts";
然后转到： app/assets/semantic/semantic-ui/src/site/elements/icon.variables并添加：
/******************************* Icon *******************************/ /*-------------- Font Files ---------------*/ @fontName: 'icons'; @src: font-url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), font-url("@{fontPath}/@{fontName}.woff2") format('woff2'), font-url("@{fontPath}/@{fontName}.woff") format('woff'), font-url("@{fontPath}/@{fontName}.ttf") format('truetype'), font-url("@{fontPath}/@{fontName}.svg#icons") format('svg') ; @fallbackSRC: font-url("@{fontPath}/@{fontName}.eot"); /*-------------- Optional Files ---------------*/ /* Outline Icons */ @importOutlineIcons: true; @outlineFontName: 'outline-icons'; @outlineSrc: font-url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'), font-url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'), font-url("@{fontPath}/@{outlineFontName}.woff") format('woff'), font-url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'), font-url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg') ; @outlineFallbackSRC: font-url("@{fontPath}/@{outlineFontName}.eot"); /* Brand Icons */ @importBrandIcons: true; @brandFontName: 'brand-icons'; @brandSrc: font-url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'), font-url("@{fontPath}/@{brandFontName}.woff2") format('woff2'), font-url("@{fontPath}/@{brandFontName}.woff") format('woff'), font-url("@{fontPath}/@{brandFontName}.ttf") format('truetype'), font-url("@{fontPath}/@{brandFontName}.svg#icons") format('svg') ; @brandFallbackSRC: font-url("@{fontPath}/@{brandFontName}.eot");
重要！
由于某些原因，
less-railsgem监视器更改为app/assets/semantic/semantic-ui/src/semantic.less但不是app/assets/semantic/semantic-ui/src文件夹中的任何其他文件。 在*.variables，*.overrides或*.config文件之后运行rails tmp:clear或手动删除tmp/cache/assets文件夹。