I'm new to Webpack and using it for an Angular2 project (https://angularclass.github.io/angular2-webpack-starter/).
I'm having a hard time getting jQuery and Semantic-ui to work (both .css and .js) after npm installing it. I suppose it's somewhat problematic because both libraries are not in any module format, and can not simply be require(...)ed or imported
Do I need to include them simply in the index.html as normal , or is there a 'Webpack way' to do this ?
Follow these steps:
npm install semantic-ui --save src/assets."Build" Semantic using gulp build inside its directory.
This will create another directory under /semantic called dist or whatever name you set as output directory during the installation process.
Now we will have to tell Webpack to load Semantic's .js and .css files (the ones in the newly created /semantic/dist/ directory).
I generated my project using angular-cliand have my configs in the root directory in a file called angular-cli.json.
It looks like this:
https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
Look for "styles" and "scripts" in the JSON and add Semantic's minified .css and .js respectively:
"assets/semantic/dist/semantic.min.css"
and
"assets/semantic/dist/semantic.min.js"
As you already stated in your question, Semantic-UI needs jQuery in order to work.
We will just add the script to the <.head> of index.html (in the /src directory):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Build or serve your app again and you should have Semantic-UI working properly ;)
Hope this helps.
accordion but the click doesn't open and collapse the sections. What am I missing ?