无法加载 Rails 样式表中的语义 UI.解析值错误很多 [英] Semantic UI in Rails Stylesheet could not be loaded. A lot of errors in parsing value

问题描述

我正在开发一个使用语义 UI 作为前端框架的 Rails 应用程序.

我使用的是 Rails 5.

我按照本网站上的说明操作(

编辑

通过将我的链轮"gem 版本降低到 3.6.3，而不是 3.7.1，我能够消除无法加载样式表"错误.(不过，我不确定这是否是一种安全的方法.链轮中存在已弃用方法的警告，因此人们建议改用 3.6.3 版.)但是，控制台日志中的其他错误还留着.

编辑 2

无法加载样式表"错误仍然存​​在.

编辑 3

我切换到 sass 版本的 Semantic UI，样式表无法加载"错误现在消失了！但是，控制台仍然有解析值错误"错误.我仍然不知道是什么导致了这种情况.对此有何想法/修复?

解决方案

从 Rails 5.1 开始，您可以使用 yarn 将语义 UI 与您的应用程序集成.这是我如何做到的.过程并不完美(在更改主题文件后您仍然必须运行 rails tmp:clear)，但它为您提供了使用最新的 semantic-ui 包的优势，而不是依赖于 gem 更新.

使用

• 红宝石:2.5.1
• Rails:5.2.0

创建一个新的 Rails 应用

$ rails new semantic_integration$ cd语义整合$ 捆绑安装

在你的应用目录中创建 semantic.json

<代码>{"base": "app/assets/semantic/semantic-ui",路径":{来源": {"config" : "src/theme.config","定义": "src/定义/","站点": "src/站点/",主题":源代码/主题/"},输出": {"打包": "dist/",未压缩":dist/components/","压缩" : "dist/components/","themes": "dist/themes/"},干净":dist/"},权限":假，自动安装":真，rtl":假，版本":2.3.1"}

运行$ yarn add semantic-ui.这将在 app/assets/semantic

中安装 semantic-ui

将以下行添加到 config/initializers/assets.rb

#语义用户界面资产Rails.application.config.assets.paths <<Rails.root.join('app', 'assets', '语义')Rails.application.config.assets.paths <<Rails.root.join('app', 'assets', 'semantic', 'semantic-ui', 'src', 'themes', 'default')

添加语义UI css

//app/assets/stylesheets/application.css*= 需要 'semantic-ui/src/semantic'

添加语义 UI js

//app/assets/javascripts/application.js//在涡轮链接之后//= 需要 jquery//= 需要语义-ui/dist/semantic

添加 init.js 并在 app/assets/javascripts/application.js

中引入

window.App ||(window.App = {});

App.init = function() {//这里是语义 UI 组件初始化//IE.$('.ui.menu .ui.dropdown').dropdown({在:'悬停'});$('.ui.menu a.item').on('点击', function() {$(这个).addClass('活动').兄弟姐妹().removeClass('active');});};$(document).on('turbolinks:load', function () {App.init();});

在你的 Gemfile 中添加:

gem 'therubyracer'gem 'less-rails'

并运行bundle install

现在您的应用程序应该能够编译语义 UI 较少的文件.
如果您遇到错误:

expected ')' 得到 'o'

转到app/assets/semantic/semantic-ui/src/theme.less并删除 @import 语句中的 (optional) 关键字

<小时>

图标字体

转到:app/assets/semantic/semantic-ui/src/site/globals/site.variables并添加:

/* 字体 */@fontPath :资产/字体"；

然后转到:app/assets/semantic/semantic-ui/src/site/elements/icon.variables并添加:

/***********************************图标********************************//*--------------字体文件---------------*/@fontName: '图标';@src:font-url("@{fontPath}/@{fontName}.eot?#iefix") 格式('embedded-opentype'),font-url("@{fontPath}/@{fontName}.woff2") 格式('woff2'),font-url("@{fontPath}/@{fontName}.woff") 格式('woff'),font-url("@{fontPath}/@{fontName}.ttf") 格式('truetype'),font-url("@{fontPath}/@{fontName}.svg#icons") 格式('svg');@fallbackSRC: font-url("@{fontPath}/@{fontName}.eot");/*--------------可选文件---------------*//* 大纲图标 */@importOutlineIcons: 真；@outlineFontName: 'outline-icons';@outlineSrc:font-url("@{fontPath}/@{outlineFontName}.eot?#iefix") 格式('embedded-opentype'),font-url("@{fontPath}/@{outlineFontName}.woff2") 格式('woff2'),font-url("@{fontPath}/@{outlineFontName}.woff") 格式('woff'),font-url("@{fontPath}/@{outlineFontName}.ttf") 格式('truetype'),font-url("@{fontPath}/@{outlineFontName}.svg#icons") 格式('svg');@outlineFallbackSRC: font-url("@{fontPath}/@{outlineFontName}.eot");/* 品牌图标 */@importBrandIcons: 真；@brandFontName: '品牌图标';@brandSrc:font-url("@{fontPath}/@{brandFontName}.eot?#iefix") 格式('embedded-opentype'),font-url("@{fontPath}/@{brandFontName}.woff2") 格式('woff2'),font-url("@{fontPath}/@{brandFontName}.woff") 格式('woff'),font-url("@{fontPath}/@{brandFontName}.ttf") 格式('truetype'),font-url("@{fontPath}/@{brandFontName}.svg#icons") 格式('svg');@brandFallbackSRC: font-url("@{fontPath}/@{brandFontName}.eot");

<小时>

重要！

<块引用>

出于某种原因 less-rails gem 监视更改为app/assets/semantic/semantic-ui/src/semantic.less 但不是任何其他app/assets/semantic/semantic-ui/src 文件夹中的文件.更改后*.variables、*.overrides 或 *.config 文件运行 rails tmp:clear 或手动删除 tmp/cache/assets 文件夹.

<小时>

演示应用

https://github.com/ziinfo/semantic_integration.git

I'm working on a Rails app that uses Semantic UI as its frontend framework.

I'm using Rails 5.

I followed the instructions on this site (https://github.com/Semantic-Org/Semantic-UI-Rails-LESS) to include the gems needed for Semantic to work on Rails.

In my html.erb file (the left portion of the photo), I've used some Semantic UI buttons, just to test out if Semantic loads.

I believe it loaded, but I'm getting a bunch of errors in my console (+ it is saying on the top right that the Style sheet could not be loaded).

What seems to be the problem?

EDIT

I was able remove the 'Style sheet could not be loaded' error by lowering my 'sprockets' gem version to 3.6.3, instead of 3.7.1. (I'm not sure if this is a safe way of doing it, though. There were warning of deprecated methods in the sprockets, so people were suggesting to use version 3.6.3 instead.) However, the other errors in the console log still remained.

EDIT 2

The 'Style sheet could not be loaded' error still remained.

EDIT 3

I switched to the sass version of Semantic UI, and the "Style sheet could not be loaded" error is now gone! But, the console still had the "error in parsing values" error. I still don't know what is causing this. Any thoughts/fixes to this?

解决方案

Since Rails 5.1 you can use yarn to integrate Semantic UI with your app. Here's how I've done it. Process is not perfect (you still have to run rails tmp:clear after changing your theme files), but it gives you advantage of using the latest semantic-ui package and not being dependent on gem updates.

Using

• Ruby: 2.5.1
• Rails: 5.2.0

Create a new rails app

$ rails new semantic_integration
$ cd semantic_integration
$ bundle install

create semantic.json in your app directory

{
  "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. This will install semantic-ui in app/assets/semantic

Add followin lines to 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')

Add Semantic UI css

// app/assets/stylesheets/application.css
*= require 'semantic-ui/src/semantic'

Add Semantic UI js

// app/assets/javascripts/application.js
// after turbolinks

//= require jquery
//= require semantic-ui/dist/semantic

Add init.js and require it in app/assets/javascripts/application.js

window.App || (window.App = {});

App.init = function() {
  // here goes Semantic UI component initialisation
  // i.e.
  $('.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();
});

In you Gemfile add:

gem 'therubyracer'
gem 'less-rails'

and run bundle install

Now you app should be able to compile Semantic UI less files.
If you're getting error:

expected ')' got 'o'

go to app/assets/semantic/semantic-ui/src/theme.less and remove (optional) keywords on @import statements

---

Icon font

go to: app/assets/semantic/semantic-ui/src/site/globals/site.variables and add:

/* Fonts */
@fontPath  : "assets/fonts";

then go to: app/assets/semantic/semantic-ui/src/site/elements/icon.variables and add:

/*******************************
             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");

---

Important!

For some reason less-rails gem monitors changes to app/assets/semantic/semantic-ui/src/semantic.less but not any other files in app/assets/semantic/semantic-ui/src folder. After changin *.variables, *.overrides, or *.config files run rails tmp:clear or manually delete tmp/cache/assets folder.

---

Demo App

https://github.com/ziinfo/semantic_integration.git

这篇关于无法加载 Rails 样式表中的语义 UI.解析值错误很多的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！