I’m about to get webpack:webpack running! I’m still having an issue with server side rendering:
on the client, having
import './myStyle.less';
will add a style tag in the webpage’s head that loads the corresponding style. Great! However on the server side (done with FlowRouterSSR) this does nothing. So my server side rendering output all the html with no style and the page is ugly until the client code is loaded.
I’ve found one way around on the server side using kadira:dochead
that is to do:
import { DocHead } from 'meteor/kadira:dochead';
import myStyle from './myStyle.less';
export default class myComponent extends Component {
constructor(props) {
...
const cssText = myStyle[0][1]; // this correspond to the css text
const scriptTag = `<style type="text/css">${cssText}</style>`;
// if Meteor.isClient webpack will inject a link to the stylesheet in the head and there is nothing to do
if (!Meteor.isClient) {
docHead._addToHead(scriptTag);
}
}
}
That will inject the css directly in the head as plain text and it works. However I’d much prefer to inject a link to the stylesheet. So here is my question: how can I get the url of the stylesheet that is generated by webpack?