如何在语义UI反应项目中导入Google字体？
我使用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开发者工具中的“网络”标签
项目目录树
~/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的任何地方，因此我只能猜测正在使用这两种解决方案中的哪一种，因此我提供了两种解决方案。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？