如何在语义UI反应项目中导入Google字体？

时间：2018-08-08 19:02:46

标签： reactjs less semantic-ui create-react-app semantic-ui-react

我使用create-react-app引导项目，并且正在使用语义UI-react。我安装了语义UI和gulp，以便可以自定义主题。我想选择要使用的Google字体，但不知道如何导入。

我按照语义UI文档(here)中的说明进行操作，该文档指向site.variables文件，在该文件中可以使用预定义的全局less变量来更改站点。 The "default" theme uses the variables below导入Google字体。我加入了相同的变量，并将@fontName更改为所需的google字体，但是该字体没有导入（我在Chrome开发者控制台中检查了源代码）。

@fontName          : 'Anton';
@fontSmoothing     : antialiased;
@googleFontFamily  : 'Anton';

@headerFont        : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont          : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;

@googleFontName    : @fontName;
@importGoogleFonts : true;
@googleFontSizes   : '400,700,400italic,700italic';
@googleSubset      : 'latin';

@googleProtocol    : 'https://';
@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';

奇怪的是，imported in the "default" theme的Google字体“ Lato”也没有在开发者控制台中显示为源。我的gulp管道可能有问题吗？让我知道我是否可以提供其他代码或信息来帮助您回答问题。

根据@Benjamin的要求，这是相关的React代码：

project / src / index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import registerServiceWorker from './registerServiceWorker';
import './semantic/dist/semantic.min.css';


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

project / src / App.js 

import React, { Component } from 'react';
import TopMenu from './Menu.js'


class App extends Component {
  render() {
    return (
      <div className="App">
        <TopMenu />
      </div>
    );
  }
}

export default App;

project / src / Menu.js 

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'
import SignInScreen from './Login.js'


export default class TopMenu extends Component {
  state = { activeItem: 'home' }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu size='small' stackable >
        <Menu.Item name='home' onClick={this.handleItemClick} />
        <Menu.Item
          name='messages'
          active={activeItem === 'messages'}
          onClick={this.handleItemClick}
        />
        <Menu.Item position='right'>
          <SignInScreen />
        </Menu.Item>
      </Menu>
    )
  }
}

Chromer开发者工具中的“网络”标签

enter image description here

项目目录树

 ~/Documents/bingo  tree -C -L 6 --filelimit=12                                                                                                                                                                       
.
├── README.md
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
│   ├── index.js
│   └── package.json
├── node_modules [1172 entries exceeds filelimit, not opening dir]
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── semantic.json
├── src
│   ├── App.js
│   ├── App.test.js
│   ├── Config.js
│   ├── Login.js
│   ├── Menu.js
│   ├── firebaseui-styling.global.css
│   ├── images
│   │   └── gsb-logo.jpeg
│   ├── index.js
│   ├── logo.svg
│   ├── registerServiceWorker.js
│   └── semantic
│       ├── dist
│       │   ├── components
│       │   │   ├── dropdown.css
│       │   │   ├── dropdown.min.css
│       │   │   ├── image.css
│       │   │   ├── image.min.css
│       │   │   ├── item.css
│       │   │   ├── item.min.css
│       │   │   ├── menu.css
│       │   │   ├── menu.min.css
│       │   │   ├── reset.css
│       │   │   ├── reset.min.css
│       │   │   ├── transition.css
│       │   │   └── transition.min.css
│       │   ├── semantic.css
│       │   ├── semantic.min.css
│       │   └── themes
│       │       ├── basic
│       │       │   └── assets
│       │       ├── default
│       │       │   └── assets
│       │       ├── github
│       │       │   └── assets
│       │       └── material
│       │           └── assets
│       ├── gulpfile.js
│       ├── src
│       │   ├── definitions
│       │   │   ├── behaviors
│       │   │   │   ├── api.js
│       │   │   │   ├── form.js
│       │   │   │   └── visibility.js
│       │   │   ├── collections
│       │   │   │   ├── breadcrumb.less
│       │   │   │   ├── form.less
│       │   │   │   ├── grid.less
│       │   │   │   ├── menu.less
│       │   │   │   ├── message.less
│       │   │   │   └── table.less
│       │   │   ├── elements [15 entries exceeds filelimit, not opening dir]
│       │   │   ├── globals
│       │   │   │   ├── reset.less
│       │   │   │   ├── site.js
│       │   │   │   └── site.less
│       │   │   ├── modules [32 entries exceeds filelimit, not opening dir]
│       │   │   └── views
│       │   │       ├── ad.less
│       │   │       ├── card.less
│       │   │       ├── comment.less
│       │   │       ├── feed.less
│       │   │       ├── item.less
│       │   │       └── statistic.less
│       │   ├── semantic.less
│       │   ├── site
│       │   │   ├── collections
│       │   │   │   ├── breadcrumb.overrides
│       │   │   │   ├── breadcrumb.variables
│       │   │   │   ├── form.overrides
│       │   │   │   ├── form.variables
│       │   │   │   ├── grid.overrides
│       │   │   │   ├── grid.variables
│       │   │   │   ├── menu.overrides
│       │   │   │   ├── menu.variables
│       │   │   │   ├── message.overrides
│       │   │   │   ├── message.variables
│       │   │   │   ├── table.overrides
│       │   │   │   └── table.variables
│       │   │   ├── elements [30 entries exceeds filelimit, not opening dir]
│       │   │   ├── globals
│       │   │   │   ├── reset.overrides
│       │   │   │   ├── reset.variables
│       │   │   │   ├── site.overrides
│       │   │   │   └── site.variables
│       │   │   ├── modules [34 entries exceeds filelimit, not opening dir]
│       │   │   └── views
│       │   │       ├── ad.overrides
│       │   │       ├── ad.variables
│       │   │       ├── card.overrides
│       │   │       ├── card.variables
│       │   │       ├── comment.overrides
│       │   │       ├── comment.variables
│       │   │       ├── feed.overrides
│       │   │       ├── feed.variables
│       │   │       ├── item.overrides
│       │   │       ├── item.variables
│       │   │       ├── statistic.overrides
│       │   │       └── statistic.variables
│       │   ├── theme.config
│       │   ├── theme.less
│       │   └── themes [23 entries exceeds filelimit, not opening dir]
│       └── tasks [13 entries exceeds filelimit, not opening dir]
├── yarn-error.log
└── yarn.lock

33 directories, 87 files

project / src / semantic / src / theme.config 

/*

████████╗██╗  ██╗███████╗███╗   ███╗███████╗███████╗
╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝██╔════╝
   ██║   ███████║█████╗  ██╔████╔██║█████╗  ███████╗
   ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝  ╚════██║
   ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗███████║
   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝╚══════╝

*/

/*******************************
        Theme Selection
*******************************/

/* To override a theme for an individual element
   specify theme name below
*/

/* Global */
@site       : 'default';
@reset      : 'default';

/* Elements */
@button     : 'default';
@container  : 'default';
@divider    : 'default';
@flag       : 'default';
@header     : 'default';
@icon       : 'default';
@image      : 'default';
@input      : 'default';
@label      : 'default';
@list       : 'default';
@loader     : 'default';
@rail       : 'default';
@reveal     : 'default';
@segment    : 'default';
@step       : 'default';

/* Collections */
@breadcrumb : 'default';
@form       : 'default';
@grid       : 'default';
@menu       : 'default';
@message    : 'default';
@table      : 'default';

/* Modules */
@accordion  : 'default';
@checkbox   : 'default';
@dimmer     : 'default';
@dropdown   : 'default';
@embed      : 'default';
@modal      : 'default';
@nag        : 'default';
@popup      : 'default';
@progress   : 'default';
@rating     : 'default';
@search     : 'default';
@shape      : 'default';
@sidebar    : 'default';
@sticky     : 'default';
@tab        : 'default';
@transition : 'default';

/* Views */
@ad         : 'default';
@card       : 'default';
@comment    : 'default';
@feed       : 'default';
@item       : 'default';
@statistic  : 'default';

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder   : 'site/';


/*******************************
         Import Theme
*******************************/

@import (multiple) "theme.less";

/* End Config */

project / src / firebaseui-styling.global.css 

.firebaseui-container {
  background: rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  min-height: 150px;
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: none;
}
.firebaseui-container.firebaseui-page-provider-sign-in {
  background: transparent;
  box-shadow: none;
  min-height: 0;
  margin-bottom: 0;
  padding-top: 0;
}
.firebaseui-container.firebaseui-id-page-callback {
  background: transparent;
  box-shadow: none;
  margin-top: 40px;
  height: 84px;
  min-height: 0;
  margin-bottom: 0;
  padding-top: 0;
}
.firebaseui-card-header {
  display: none;
}
.firebaseui-subtitle, .firebaseui-text {
  color: rgba(255, 255, 255, 0.87);
}
.firebaseui-form-actions .mdl-button--raised.mdl-button--colored.firebaseui-button {
  background: rgba(0, 0, 0, 0.1);
}
.firebaseui-id-dismiss-info-bar {
  display: block;
}
.firebaseui-info-bar {
  border: 0;
  border-radius: 10px;
  left: 5%;
  right: 5%;
  top: 10%;
  bottom: 10%;
}


.image-container {
  background-size:cover;
  background-repeat:no-repeat;
  width:40px;
  height:40px;
  clip-path: circle(50% at top 50% left 50%);
}

1 个答案:

答案 0 :(得分：1)

请记住，语义UI和语义UI React是两个单独的项目。所有样式都在语义UI中。要获得这些样式，您要么必须将预编译的CSS导入项目中，要么自己构建它们（使用Semantic UI构建工具，semantic-ui-sass，semantic-ui-less等）。

根据您的问题，您似乎正在尝试更改CSS的语义UI生成工具中的变量。为了获得这些更改，您需要构建与React应用程序分开的那些样式。一旦构建了这些样式，就可以将输出导入到React应用程序中。您既可以单独执行此操作，也可以同时运行这些过程，以便自动编译样式中的更改，并且一旦输出更改的CSS文件将立即重新加载到您的React应用程序中。

如果您正在使用预编译的CSS，而只想覆盖使用的字体，则可以使用@ font-face声明创建自己的CSS文件，并将其导入React应用程序的根目录。只要您的CSS比语义UI中使用的类更具体，字体就可以使用。

从上面的代码示例中，我看不到要导入CSS的任何地方，因此我只能猜测正在使用这两种解决方案中的哪一种，因此我提供了两种解决方案。

相关问题
最新问题