流星+语义反应

Question

上次编辑：

切勿在 meteor 中使用 npm raw 命令。总是流星 npm。这就是一切都崩溃的原因。

并逐步升级，版本到最近的版本。

我认为这就是引起这种头痛的原因。

现在一切正常。

谢谢！

编辑：

在尝试了前面的所有步骤之后...我从 meteor

中删除了 jquery / less 和 semantic:ui

meteor remove semantic:ui
meteor remove jquery less  
meteor npm uninstall semantic-ui semantic-ui-css

已添加

meteor npm install @craco/craco @semantic-ui-react/craco-less --save-dev
meteor npm install semantic-ui-less --save
meteor npm install --save react react-dom semantic-ui-react

发射流星

但是没有 react-semantic-ui css 文件

和：

meteor npm install

returns

npm WARN @craco/craco@6.4.3 requires a peer of react-scripts@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @semantic-ui-react/craco-less@2.0.2 requires a peer of react-scripts@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN cosmiconfig-typescript-loader@1.0.5 requires a peer of @types/node@* but none is installed. You must install peer dependencies yourself.
npm WARN cosmiconfig-typescript-loader@1.0.5 requires a peer of cosmiconfig@>=7 but none is installed. You must install peer dependencies yourself.
npm WARN cosmiconfig-typescript-loader@1.0.5 requires a peer of typescript@>=3 but none is installed. You must install peer dependencies yourself.
npm WARN craco-less@2.0.0 requires a peer of react-scripts@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN less-loader@7.3.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ts-node@10.5.0 requires a peer of @types/node@* but none is installed. You must install peer dependencies yourself.
npm WARN ts-node@10.5.0 requires a peer of typescript@>=2.7 but none is installed. You must install peer dependencies yourself.

原始问题

我尝试了很多方法来让它一起工作，但我总是被

困住

Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?

（我手动添加了括号 -> 已修复，但它应该开箱即用...）

之后

   While processing files with less (for target web.browser.legacy):
   client/lib/semantic-ui/definitions/globals/site.import.less:29:
   variable @googleProtocol is undefined
   error: variable @googleProtocol is undefined

有人有“从头开始”的方法来创建具有语义的 Meteor 项目吗-ui？

谢谢

这是我经历过的所有步骤（扩展版）...

meteor create test
cd test
meteor add semantic:ui
meteor remove standard-minifier-css
meteor add less juliancwirko:postcss

添加到 package.json

{ "devDependencies": { "autoprefixer": "^6.3.1" }, "postcss": { "plugins": { "autoprefixer": {"browsers": ["last 2 versions"]} } } }

然后执行

meteor npm install

meteor npm install semantic-ui-react semantic-ui-css

通过在 App.jsx

中添加按钮来测试显示

import React from 'react';
import { Hello } from './Hello.jsx';
import { Info } from './Info.jsx';
import {Button} from "semantic-ui-react";

export const App = () => (
  <div>
    <h1>Welcome to Meteor!</h1>
      <Button primary>Primary</Button>
      <Button secondary>Secondary</Button>
    <Hello/>
    <Info/>
  </div>
);

然后执行

meteor

但 css 未应用 ...

阅读https://github.com/Semantic-Org/Semantic-UI-Meteor并添加

{
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss": "^6.0.22",
    "postcss-load-config": "^1.2.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
}

然后删除。custom.semantic.json

meteor npm install

设置

"basic": true,

在custom.semantic.json

又一次

meteor

仍然没有语义-ui-在显示中有反应

语义css 不在浏览器检查器中:/

meteor add less jquery

然后再

meteor

这是第一个错误：

While processing files with less (for target web.browser):
client/lib/semantic-ui/themes/default/globals/site.variables.import.less:412:19: 
Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?
error: Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?

让我们手动修复它...通过添加括号...

@mini            : unit( (round(@miniSize * @emSize) / @emSize), rem);
@tiny            : unit( (round(@tinySize * @emSize) / @emSize), rem);
@small           : unit( (round(@smallSize * @emSize) / @emSize), rem);
@medium          : unit( (round(@mediumSize * @emSize) / @emSize), rem);
@large           : unit( (round(@largeSize * @emSize) / @emSize), rem);
@big             : unit( (round(@bigSize * @emSize) / @emSize), rem);
@huge            : unit( (round(@hugeSize * @emSize) / @emSize), rem);
@massive         : unit( (round(@massiveSize * @emSize) / @emSize), rem);

/* em */
@relativeMini    : unit( (round(@miniSize * @emSize) / @emSize), em);
@relativeTiny    : unit( (round(@tinySize * @emSize) / @emSize), em);
@relativeSmall   : unit( (round(@smallSize * @emSize) / @emSize), em);
@relativeMedium  : unit( (round(@mediumSize * @emSize) / @emSize), em);
@relativeLarge   : unit( (round(@largeSize * @emSize) / @emSize), em);
@relativeBig     : unit( (round(@bigSize * @emSize) / @emSize), em);
@relativeHuge    : unit( (round(@hugeSize * @emSize) / @emSize), em);
@relativeMassive : unit( (round(@massiveSize * @emSize) / @emSize), em);

/* rem */
@absoluteMini    : unit( (round(@miniSize * @emSize) / @emSize), rem);
@absoluteTiny    : unit( (round(@tinySize * @emSize) / @emSize), rem);
@absoluteSmall   : unit( (round(@smallSize * @emSize) / @emSize), rem);
@absoluteMedium  : unit( (round(@mediumSize * @emSize) / @emSize), rem);
@absoluteLarge   : unit( (round(@largeSize * @emSize) / @emSize), rem);
@absoluteBig     : unit( (round(@bigSize * @emSize) / @emSize), rem);
@absoluteHuge    : unit( (round(@hugeSize * @emSize) / @emSize), rem);
@absoluteMassive : unit( (round(@massiveSize * @emSize) / @emSize), rem);

下次试试

meteor

但是

client/lib/semantic-ui/definitions/globals/site.import.less:29: variable @googleProtocol is undefined

错误：变量@googleProtocol 未定义

让我们手动修改它...然后重试...但是:

client/lib/semantic-ui/definitions/globals/site.import.less:29: variable @googleFontRequest is undefined
error: variable @googleFontRequest is undefined

一定有事情要做，我快疯了还是？

谢谢！

Answer 1

我认为您给自己造成了一些混乱。我能够使用 semantic-ui-react 创建一个简单的流星应用程序，如下所示：

meteor create mySemanticTest
cd mySemanticTest
meteor npm install --save react react-dom semantic-ui-react semantic-ui-css
meteor

然后我将 App.jsx 编辑为：

import React from 'react';

import 'semantic-ui-css/semantic.min.css'
import { Button } from 'semantic-ui-react'

export const App = () => (
  <div>
    <h1>Welcome to Meteor!</h1>

    <Button>This works</Button>
  </div>
);

一切正常，看起来不错：

Answer 2

这是一个使用 Meteor 2.6 和 Semantic UI React 的示例系统：

https://ics-software-engineering.github.io/meteor-application-template-react/

流星+语义反应

Meteor + Semantic React

meteor

reactjs

semantic-ui

上次编辑：

编辑：

原始问题