【发布时间】：2018-08-08 19:02:46
【问题描述】：
我使用 create-react-app 来引导一个项目，并且正在使用 semantic-ui-react。我安装了 semantic-ui 和 gulp，所以我可以做自定义主题。我想选择一种 Google 字体来使用，但我不知道如何导入它。
我按照语义用户界面文档(here) 中的说明进行操作，该文档指向site.variables 文件，可以使用预定义的全局变量来更改站点。 The "default" theme uses the variables below 导入谷歌字体。我包含了相同的变量并将@fontName 更改为我想要的谷歌字体，但字体没有导入（我在 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 的谷歌字体“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 开发者工具中的网络标签
项目目录树
~/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%);
}
【问题讨论】：
-
愚蠢的问题：您的控制台中是否有激活的过滤器？还介意添加 gulp 文件的相关部分吗？
-
@Benjamin 现在添加 GUI 代码。不确定在我的控制台中激活的过滤器是什么意思？我只是去谷歌开发者工具，然后点击“源”来查看存在哪些本地和远程源。
-
sry 我弄错了网络选项卡。但是说到它：您是否也检查过网络选项卡？正在请求字体吗？
-
@Benjamin Ah 不用担心。我刚刚检查了网络选项卡，不，没有请求字体。我不知道为什么不呢？我认为这与语义和 Gulp 有关。
标签： reactjs less semantic-ui create-react-app semantic-ui-react