Module not found: Error: Cannot resolve module 'semantic-ui-css'

Question

I'm trying to use Webpack + Semantic UI but without success. I tried...

1. npm i semantic-ui-css
2. In my index.js.. import semantic from 'semantic-ui-css'

3. I add configuration into my webpack.config.js

   resolve: { 
         alias: {'semantic-ui': path.join(__dirname, "node_modules", "semantic-ui-css", semantic.min.js")
   }
   

But when I try to buid... error..

ERROR in ./src/index.js Module not found: Error: Cannot resolve module 'sematic-ui-css' in /Users/ridermansb/Projects/boilerplate-projects/vue/src @ ./src/index.js 15:20-45

Full source here

Answer 1

If you came here trying to use 'semantic-ui-react' you need to install 'semantic-ui-css' seperatly to grab the css files:

yarn add semantic-ui-css

and then import it in the index.js

import 'semantic-ui-css/semantic.min.css';

Answer 2

All you have to do:

css: import 'semantic-ui-css/semantic.css';

js: import 'semantic-ui-css/semantic.js';

This solves my problem with webpack and react.