Giters

elm-community / elm-webpack-starter

Boilerplate for developing Elm apps on Webpack

Home Page:http://elm-community.org/elm-webpack-starter/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Linking external JS file

kittykatattack opened this issue · comments

commented

Hi,

I have a very basic question about how to link an external JS file.

I'm using Material Design Lite (https://getmdl.io/index.html) for basic styling. It contains a CSS and JS file. I've been able to load the CSS file by adding a simple link in the head of index.html. But, I haven't been able to figure out how to link the JS file. Loading it with a <script> tag in the <body> seems to have no effect:

<body>
    <div id="main"></div>
    <script src="mdl/material.min.js"></script>
  </body>

Does the JS file need to be linked in webpack.config.js, index.js or through a subscription in the Elm source code?
Any advice would be appreciated 😄

commented

It should work, assuming the mdl folder is in your dist folder. However, when using elm-webpack-starter, the dist folder is recreated whenever you run npm run build, so you would have to ensure that your libs get copied over each time as well (there are a few ways to do it).

With Webpack, a more common approach is to install your libs with NPM, and then require them:

npm install material-design-lite --save-dev

Then in your src/index.js, you can import as (unminified):

require( 'material-design-lite/material.css' );
require( 'material-design-lite/material.js' );

For the icon font, you can either add it into the head section of your src/index.html or add it into your root-level (s)css file, like this @import url(https://fonts.googleapis.com/icon?family=Material+Icons);

commented

Thanks so much for your detailed response!
I will try what you've suggested.