目前，我正在尝试在我的反应应用程序中使用语义用户界面。它目前正在改变整个应用程序css。我查找了一个解决方案来执行嵌套的scss导入，以将其隔离到div。在这样做的时候，我得到了这个错误：
./src/组件/_员工。scss（./node_modules/css loader/dist/cjs.js？？ref--6-oneOf-5-1！。/node_modules/postscs loader/src？？postsss！。/node_modules/resolve url loader？？ref--6-oneOf-5-4！。/src/components/_employeers.scss）未找到模块：无法解析'/语义用户界面css/语义。“C:\Users\silve\desktop\Java\u Project\my app\src\components”中的min.css”
以下是我正在处理的文件：
_语义用户界面。scss：
.semantic-ui{
@import 'semantic-ui-css/semantic.min.css';
}
_EmployeeRes.scss
.profile-icons{
@import 'semantic-ui';
}
js
import React from 'react'
import { AgGridReact } from 'ag-grid-react'
import './_EmployeeRES.scss'
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import Button from '@material-ui/core/Button'
import ClickAwayListener from '@material-ui/core/ClickAwayListener'
import Paper from '@material-ui/core/Paper'
import MenuItem from '@material-ui/core/MenuItem'
import Menu from '@material-ui/core/Menu'
import Modal from 'react-modal'
import { Icon } from 'semantic-ui-react'
import { Link } from '@material-ui/core';
import { withRouter } from 'react-router-dom'
...
export const Profile = ({visible, closeProfile,customStyle}) => (
<Modal
isOpen={visible}
onRequestClose={()=>closeProfile()}
style={customStyle}>
<div className='profile-container'>
<div style={{textAlign:'center' ,fontSize: '16px', fontWeight: 'bold'}}>Profile</div>
<div className='profile-pic-container'></div>
<div style={{textAlign:'center',fontSize:'14px', marginTop: '10px'}}>
<div>{'First Name Last Name'}</div>
<div>{'Position'}</div>
<div>{'City, State'}</div>
</div>
<div className='profile-icons'>
<Icon name='phone' color='green' size='large'/>
</div>
</div>
</Modal>
)
所有这些文件都在同一个目录中。
您遇到的第一个问题是，您没有正确导入语义UI库。应该是：
.semantic-ui{
@import '~semantic-ui-css/semantic.min.css';
}
~告诉webpack在节点模块文件夹中查找该文件。没有它，SASS parcer将在当前目录中查找，如果在那里找不到，它将搜索通过--load path参数（CLI）或includePath（JS API）定义的目录。
第二个问题是您应该使用。css在SASS中导入css文件时的扩展。如果不这样做，它们将被转换为正常的CSS导入规则，@import url（…），这就是语义ui规则没有嵌套在中的原因。配置文件图标class。尝试：
.semantic-ui{
@import '~semantic-ui-css/semantic.min';
}
由于某种原因，@font-face在语义中定义了规则。如果像这样嵌套规则，min.css文件将停止工作。不确定它是无效的CSS还是webpack无法确定文件的位置。一个快速修复方法是在项目的顶层，在索引中重新定义它们。css也许：
// index.css
@font-face {
font-family: "Icons";
src: url("~semantic-ui-css/themes/default/assets/fonts/icons.woff")
format("woff");
}
