Как правильно сделать вложенный импорт для s css? Semanti c -UI проблемы?

Question

В настоящее время я пытаюсь использовать пользовательский интерфейс Semanti c с моим приложением реагирования. В настоящее время изменяется все приложения css. Я искал решение для выполнения вложенного импорта s css, чтобы изолировать его от div. При этом я получаю эту ошибку:

. / Src / components / _EmployeeRES.s css (./node_modules/css-loader/dist/cjs.js? ? исх -! 6-oneOf-5-1 ./ node_modules / после css -loader / ср c ?? пост css ./ node_modules / решимость-URL-погрузчик ?? исх - 6- oneOf-5-3 ./ node_modules / дерзость-погрузчик / расстояние / cjs 1030 * ?? исх -.! 6-oneOf-5-4 ./ SRC / компоненты / _EmployeeRES.s css) Модуль не найден: не удается разрешить './semantic-ui-css/semantic.min.css' в 'C: \ Users \ silve \ desktop \ Java_Project \ my- app \ src \ components '

Вот файлы, с которыми я работаю:

_semanti c -ui.s css:

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

_EmployeeRes .s css

.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

Первая проблема, с которой вы столкнулись, заключается в том, что вы неправильно импортировали библиотеку пользовательского интерфейса Semanti c. Это должно быть:

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

~ указывает веб-пакету искать этот файл в папке node_modules. Без него SASS-парсер будет искать внутри вашего текущего каталога, и если он не сможет найти его там, он будет искать в каталогах, определенных с помощью аргумента - load-path (CLI), или includePaths (JS API).

Вторая проблема заключается в том, что при импорте файлов CSS внутри SASS вы должны пропустить расширение .css. Если вы этого не сделаете, они будут переведены в обычные правила импорта CSS, @import url(...), поэтому ваши правила semanti c -ui не вкладываются в класс .profile-icons. Попробуйте:

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

По некоторым причинам @font-face правила, определенные в файле semantic.min.css, перестанут работать, если вы вложите свои правила таким образом. Не уверен, что это неверно CSS или веб-пакет не может определить местоположение файлов. Быстрое решение - переопределить их на верхнем уровне вашего проекта, внутри index.css, возможно:

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