时间戳

首页 > 解决方案 > 如何正确地为 scss 进行嵌套导入？语义 UI 问题？

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

问题描述

目前我正在尝试将语义 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>
)

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

标签： javascriptcssreactjssass

解决方案

您遇到的第一个问题是因为您没有正确导入语义 UI 库。它应该是：

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

~告诉 webpack 在文件夹中查找该文件node_modules。没有它，SASS parcer 将在您的当前目录中查找，如果在其中找不到它，它将搜索通过--load-path参数 (CLI) 或includePaths (JS API) 定义的目录。

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

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

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

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

推荐阅读