如何正确地为SCS执行嵌套导入？语义用户界面问题？

Question

目前，我正在尝试在我的反应应用程序中使用语义用户界面。它目前正在改变整个应用程序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>
)

所有这些文件都在同一个目录中。

Answer 1

您遇到的第一个问题是，您没有正确导入语义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");
}