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

Posted 2023-02-21

【中文标题】如何正确地为 scss 进行嵌套导入？语义 UI 问题？

【英文标题】：How to properly do nested imports for scss?Semantic-UI issues?

【发布时间】：2020-06-18 10:16:05

【问题描述】：

目前我正在尝试在我的反应应用程序中使用语义 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>
)

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

【问题讨论】：

semantic-ui-css/semantic.min.css 是否也在同一个文件夹中？如果没有，我相信您应该使用node_module 文件夹的绝对路径。

@eMontielG 是的，所有这些文件都在同一个目录中。那么绝对路径会是什么样子呢？您是在谈论 _EmployeeRes.scss 文件中的导入吗？那么 .profile-icons @import///文件路径 ？我在哪里可以找到那个文件路径？

我认为使用 SASS 你可以做`@import '~semantic-ui-css/semantic.min.css'`。但是由于您说该文件也与导入它的文件位于同一文件夹中，因此我认为它不会起作用。我以为你用 npm 来安装语义用户界面。

@eMontielG 我确实通过命令行安装了语义 ui。 _EnployeeRES.scss 中的导入来自另一个 scss 文件中的类。我看到了一个对语义 ui css 文件进行嵌套导入的解决方案。所以这就是我试图复制的解决方案。但我得到节点模块错误。所以我想知道嵌套导入有什么问题？还是完全是另一个问题？我要解决的问题是，当我直接在文件中导入语义 ui css 时，它会改变整个应用程序的 css。我对另一种解决方案持开放态度。这是我找到的唯一解决方案。

semantic.min.css 在哪里？

【参考方案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");

【讨论】：

这修复了 css 部分，但图标不呈现。这是我当前的格式： .semantic-ui import '~semantic-ui-css/semantic.min'; ，在另一个文件中是： .profile-icons import 'semantic-ui';

它实际上可以工作，但由于某种原因，图标上的 size 属性把它搞砸了。当我删除它呈现的大小时，但是当我有大小道具时它不显示

如果你检查图标，它有什么规则？

使用 chrome 开发工具进行检查。它没有出现检查。这是图标的文档，react.semantic-ui.com/elements/icon，我没有看到任何必需的道具

它应该在那里，组件最终会变成纯 html。它应该是一个<i> 标记，其类类似于：i.large.icon, i.large.icons。