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.

Is the semantic-ui-css/semantic.min.css also in the same folder? If not, I believe you should be using an absolute path to the node_module folder. — eMontielG
@eMontielG yes all these files are in the same directory. So what would the absolute path look like? are you talking about the import in the _EmployeeRes.scss file? So .profile-icons { @ import///file path} ? and where would i find that file path? — sar11
I think with SASS you can just do ` @import '~semantic-ui-css/semantic.min.css'`. But since you said that file is also in the same folder as the one importing it, I don't think it will work. I thought you used npm to install semantic-ui. — eMontielG
@eMontielG I did install semantic ui by command line. The one in the import in _EnployeeRES.scss comes from the class inside the other scss file. I saw a solution to do a nested import for the semantic ui css file. So this was the solution I was trying to replicate. But I get the node module error. So I was wondering what was wrong with the nested import ? Or is it another issue entirely? My problem I'm trying to solve is when I import the semantic ui css in the file directly it alters the css of the entire application. I'm open to another solution. This is the only solution I found though. — sar11

eMontielG eMontielG · Accepted Answer · 2020-03-09T19:10:35

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");
}

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

1 Answers