Confused while [npm install semantic-ui & semantic.json]

[frankiedrake]

I'm trying to prevent semantic-ui downloading fonts from googleapis site (and use my local fonts). I figured out that I should set @ImportGoogleFonts: falsebut the problem is that npm-install installs semantic-ui in node_modules/semantic-ui folder and also creates folder that I set in semantic.json.
So it looks like:

semantic.json
{
  "base": "assets/semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
...

I run gulp build and build was successfull and I got semantic-ui.css compiled with my fonts, but my app gets settings from node_modules/semantic-ui not assets/semantic/
In that way it ignores everything I put into site.variables
If I specify base folder as "node_modules/semantic-ui/" as a result of npm install I don't have site/ folder at all!

I'm so confused, please help me fix this.

[awgv]

Hi @DrWifey, try changing the base value in semantic.json to "assets\\semantic".

[frankiedrake]

@Banandrew Thank you for input.. I tried it all... After npm install semantic-ui it appears in assets/semantic and also to node_modules, anв my app uses exactly that folder :(

[awgv]

@DrWifey The fact that it installs it in node_modules is fine, you actually should be having two copies, so to speak. Can you please post the full path to your project folder? In what directory do you run gulp build?

[frankiedrake]

After editing site.variables I run gulp build inside assets/semantic directory and it finished successfully ( so I have updated semantic.css file in dist/ directory).
I have the following folder structure:
root folder:
node_modules
e2e
*src
angular-cli.json
karma.conf.js
package.json
protractor.conf.js
semantic.json
tslint.json

---

*src folder:
app
assets
environments
favicon.ico
index.htm
main.ts
polyfills.ts
test.ts
tsconfig.json

[awgv]

@DrWifey looks good. Which site.variables did you use exactly?

[frankiedrake]

I followed this thread and edited site/globals/site.variables. And after gulp build I checked newly generated semantic.css and it was updated according to my settings (means that it compiled using my fonts, not googleapis'). So I guess the problem is where my app takes the semanic.css file

[awgv]

@DrWifey Еverything is correct. We’ve limited GitHub issues to bug reports and feature requests to keep the board more manageable for maintainers, so I’ll be closing the thread. Please let me know if you’ll find that it’s actually an issue with the framework’s build tools, and we’ll reopen it in no time.

In the meantime, if you’ll have more questions in the future, I’ll be happy to answer them in our Gitter chatroom.

[frankiedrake]

@Banandrew Please, tell me, after running gulp build shouldn't it update semantic.css in my node_modules/semantic-ui directory? I guess it has to because my app takes css file exactly from there.

[frankiedrake]

@Banandrew Finally, I figured it out... In semantic.json file:

"output": {
      "packaged": "../../../node_modules/semantic-ui/dist/",
      "uncompressed": "../../../node_modules/semantic-ui/dist/components/",
      "compressed": "../../../node_modules/semantic-ui/dist/components/",
      "themes": "../../../node_modules/semantic-ui/dist/themes/"
    },

But faced new problem providing local path to my font, because it is always relative to site.overrides file and it changes while generating css, for example path
url('../../../src/assets/fonts/lato-regular-webfont.ttf') becomes url('../fonts/lato-regular-webfont.ttf') which is wrong. Solution I used so far is to encode font in base64 string... :|

[awgv]

@DrWifey Sorry for the delay, you shouldn’t be requiring files from node_modules. NPM uses this folder to store packages locally, and it’s always the default representation of a package; changing a file there is pointless, because when a package will be updated, any changes that you made to that file will be overwritten with the default version of SUI—that’s why it allows the installation into a separate folder.

You should revert the changes to semantic.json and work only with the source that’s in assets/semantic; files built into the dist folder of assets/semantic should be used by your application. So, it’s perfectly fine to require files from node_modules, but only if you don’t need to change the framework’s source, if you do, though, you have to do it the way that I described.

Let me know if you have more questions.

[frankiedrake]

Oh... I got it, I got why it made me so messy... Sorry... Can you suggest me how to change the instance of semantic-ui my app uses? (it's Angular-2 app)... This way?
<script src="src/assets/semantic/dist/semantic.min.js"></script>

[awgv]

@DrWifey No problem at all. I know nothing about Angular, so I think it’s best to ask around Angular communities.