Semantic-ui: [next] Custom Theme assets not copied to dist/ during built

[greenish]

Hi,

I'm using the next branch and try to create a custom theme:

---

1. I created a theme folder src/themes/myTheme/
2. and added my custom font css file to myTheme/assets/fonts/font.css
3. I changed my @fontPath in site.variables from ../../themes/default/assets/fonts to ../../themes/myTheme/assets/fonts
4. and I'm using @import url("@{fontPath}/font.css"); in site.overrides to include the file
5. also I changed theme.config to use @site : 'myTheme';

---

when building I'm getting:

[16:34:25] Plumber found unhandled error:
 Error in plugin 'gulp-concat-css' 
Message:
    Failed to find themes/myTheme/assets/fonts/font.css in [
    .,
    /Users/.../.../.../Semantic-UI-next/dist/components
]

I noticed that my assets are not copied to dist/components during the built which would solve the error.

PS.: Your doing a great job! Semantic UI is awesome!

[jlukic]

Assets are only copied if they have the same name as a UI component, i.e. myTheme/assets/fonts/icon.css or myTheme/assets/fonts/icons.css.

This is to prevent assets from components not used in your project from being included in dist/.

[greenish]

I would suggest to just copy the whole assets/ folder to dist/ since themes can need any number of additional asset.

In my opinion, when adding a theme to the themes/ folder and building, the theme should just work.. this however requires any additional assets that the theme needs to be in the right place automatically.
The assets/ folder in the theme directory seems to be the perfect place for theme creators to place all assets that they wanna ship with the theme.

Maybe there can be subfolder assets/component/ to keep components separated?
Then icons would be in assets/icons/fonts/icons.*
and I could have my custom font.css in assets/site/fonts/font.css
Like this the build can still only include the components needed but it would allow for arbitrary assets.

What do you think?

[montecruiseto]

I totally agree and ++++1 for the proposed solution
I have exactly this issue now.

[jlukic]

I've heard this complaint from a couple people. I'll remove checking against the component glob when pulling assets. I have a feeling no one will complain if unused assets are copied to their dist/.

[greenish]

Check out my pull request #2358.
This would solve the problem for now in that it keeps the current behavior but also copies component-specific assets.

If future I think only assets form themes that are actually defined in theme.less should be copied. But I think that can wait for after the release of v2.0.

The optimal solution would be to only copy assets from components that are actually used. With the proposed assets structure this would mean for each component copy assets from the folder {usedTheme}/assets/{component}. This would remove all overhead.

[greenish]

I found another problem that I forgot about since I solved it "manually":

 Error in plugin 'gulp-concat-css'
Message:
    Failed to find themes/theme/assets/site/fonts/font.css in [
    .,
    /Users/.../dist/components
]

Simply copying the assets isn't enough, the concat-css also doesn't look in the right place.. it should now also look in : /Users/.../dist/ to actually find the assets.. this problem is the same with or without my pull request.

And last but not least: a less variable @assetsPath that also gets rewritten like @fontPath would now be very helpful. (At the moment I changed my @fontPath to just point to assets/)

nvm @assetsPath seems to work without a change.

[jlukic]

I've decided removing the component glob is the easiest solution. I think although the other methods provide more granularity this will cause the least headaches.

Can you provide an example of when paths aren't being correctly converted. It should automatically replace the base paths in the gulp tasks.

[greenish]

Thanks for the fix, this does the trick as well :+1:

So with this in place, the built examples work and all paths are replaced correctly.
However the error message from my original post still appears during the build process.
Following the five steps in the op reproduces the problem.

[jlukic]

I'll try reproducing the bug..

[fvanwijk]

I have the same issue, but in the build-docs job. I have some fonts in the asset folder of my theme which are used in site.variables. The fonts are not copied to the assets folder because of the glob.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.