如何正确地为 scss 进行嵌套导入？语义 UI 问题？

Question

目前我正在尝试在我的反应应用程序中使用语义 UI。它目前正在改变整个应用程序的 css。我查找了一个解决方案来执行嵌套的 scss 导入以将其隔离到一个 div。这样做时出现此错误：

./src/components/_EmployeeRES.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src?? postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4! ./src/components/_EmployeeRES.scss) 未找到模块：无法解析“C:\Users\silve\desktop\Java_Project\my-app\src\components”中的“./semantic-ui-css/semantic.min.css”

这是我正在使用的文件：

_semantic-ui.scss：

.semantic-ui{
    @import 'semantic-ui-css/semantic.min.css';
}

_EmployeeRes.scss

.profile-icons{
    @import 'semantic-ui';
}

EmployeeRES.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 在 node_modules 文件夹中查找该文件。没有它，SASS parcer 将在您的当前目录中查找，如果在其中找不到它，它将搜索通过 --load-path 参数 (CLI) 或 includePaths (JS API) 定义的目录。

第二个问题是在 SASS 中导入 CSS 文件时应该省略 .css 扩展名。如果您不这样做，它们将被翻译成普通的 CSS 导入规则 @import url(...)，这就是您的语义 UI 规则没有嵌套在 .profile-iconsclass 中的原因。试试：

.semantic-ui{
    @import '~semantic-ui-css/semantic.min';
}

由于某种原因，semantic.min.css 文件中定义的@font-face 规则将停止工作，如果您像这样嵌套规则。不确定它是无效的 CSS 还是 webpack 无法确定文件的位置。一个快速的解决方法是在项目的顶层重新定义它们，可能在 index.css 内：

// index.css
@font-face {
  font-family: "Icons";
  src: url("~semantic-ui-css/themes/default/assets/fonts/icons.woff")
    format("woff");
}