I want to apply fomantic-ui to index.pug that is made of npm for node.js

[kimnakyeong]

Help Wanted

Problem

Describe your problem in great detail

script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js')
link(rel='stylesheet', type='text/css', href='../semantic/dist/semantic.css')
script(src='../semantic/dist/semantic.js')

this is for index.pug and

semantic folder is up of index.pug. so i add '..'

but it doesn't working and I googled it but I don't know what is wrong.

please I need help.

[y0hami]

@kimnakyeong Is your web server serving the semantic files? Your path in the link and script tag will have to be relative for the server not your project structure.

[nektro]

Try this instead:

link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.5/semantic.min.css")
script(src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.5/semantic.min.js")

[y0hami]

@nektro That may not work in this case since they might be installing the package from NPM so they can create a theme and you can't create themes when using the CDN.

[lubber-de]

Is this still an issue or can we close this?

[lubber-de]

@kimnakyeong
If your folder structure looks like this:

semantic
     | dist
        |- semantic.js
        |- semantic.css
index.pug

Then do not use the parent folder ".." but

  script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js')
  link(rel='stylesheet', type='text/css', href='semantic/dist/semantic.css')
  script(src='semantic/dist/semantic.js')

instead.

Using ".." would be correct if your folder structure looks like this

semantic
     | dist
        |- semantic.js
        |- semantic.css
mysite
     |- index.pug

However, if you use the dist versions of Fomantic and dont want to create own themes (as @hammy2899 mentioned above) and already use a cdn for jquery you may use cdns for fomantic as well (then your folder structure does not matter)

  script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js')
  link(rel='stylesheet', type='text/css', href='https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css')
  script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.minjs')

[lubber-de]

Closing because answers are given so far and no more response from the author since 6 weeks.
Will reopen if this is still an issue and the author provides more info