How to properly do nested imports for scss?Semantic-UI issues?

Question

Currently I am trying to use Semantic UI with my react application. It is currently altering the whole applications css. I looked up a solution to do nested scss imports to isolate it to a div. While doing so I get this error:

./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) Module not found: Can't resolve './semantic-ui-css/semantic.min.css' in 'C:\Users\silve\desktop\Java_Project\my-app\src\components'

Here are the files that I am working with:

_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>
)

All these files are in the same directory.

Answer 1

The first issue you're having is because you're not importing the Semantic UI library correctly. It should be:

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

The ~ tells webpack to look for that file within the node_modules folder. Without it, the SASS parcer will look inside your current directory, and if it can't find it there, it will search through the directories defined via the --load-path argument (CLI), or the includePaths (JS API).

The second issue is that you should be ommiting the .css extention when importing CSS files inside SASS. If you don't, they will be translated into normal CSS import rules, @import url(...), which is why your semantic-ui rules aren't being nested within the .profile-iconsclass. Try:

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

For some reason @font-face rules defined inside the semantic.min.css file will stop working if you nest your rules like this. Not sure if it's invalid CSS or if webpack can't figure out the files' location. A quick fix would be to redefine them at the top level of your project, inside index.css perhaps:

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