7

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

ridermansb
  • 10,779
  • 24
  • 115
  • 226
  • Are you transpiling your code? Have you tried using the babel loader for this? Instead of aliasing the library, you could just target it directly (Remove the alias and let webpack load the file automatically) – Mario Tacke Sep 06 '16 at 21:58

3 Answers3

11

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';
Davide Carpini
  • 1,581
  • 17
  • 15
3

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.

aks
  • 8,796
  • 11
  • 50
  • 78
0

To use 'semantic-ui-react' you need to install 'semantic-ui-css' npm add semantic-ui-css then you need to import the css file into 'index.js' file.

import 'semantic-ui-css/semantic.min.css';
Md. Ali Rabbi
  • 11
  • 1
  • 3