Include css files as route name

1

I am trying to set up an structure in which I need to include a css file for each route dynamically.
I am trying to get the property of the route in the helper by FlowRouter.getRouteName() AND FlowRouter.current() but its not working .

I am trying to achieve something like below:

<style href="styles/" {{currentRoute}} ".css"></style>

I really have no idea if this is possible and what am I doing wrong.

2

Hmm, that should work I think. Do you have your css-files in /public/styles?
But why do you want to do this? If you want to style your routes, the usual way is to use the route name as a class or ID on your outermost div, or even attach it to <body>, and then use css selectors to individually style your routes.

3

That approach is not working because FlowRouter.getRouteName() AND FlowRouter.current() are not giving me any value. I am trying to access them in Template Helper.

4

There are better ways to do this, but don’t concatenate the path in the HTML, just do

="/styles/{{helper}}.css" if you are doing this in an HTML file at least.

Also place it in an autorun on the instance. If you use FlowRouter.current() you have to add FlowRouter.watchPathChange() within the autorun since it’s not reactive

Template.foo.onCreated(function() {
  this.routeName = null
  this.autorun(() => {
    return this.routeName = FlowRouter.getRouteName()
  })
})

Template.foo.helpers({
  routeName () {
    return Template.instance().routeName
  }
})
1 Like