Deploy to Production - Component CSS not loaded

VueJS
1

Hi,

I cant get my component specific CSS to load properly when deploying to production. The CSS from my client folder (Semantic UI) is loading fine but not those lines defined within <style lang="less" scoped></style> in the component.

Im running my app like this NODE_ENV=production meteor --production --settings settings.json and it starts fine just without the CSS.

Trying to compare my app with https://github.com/Akryum/vue-meteor-demo but can find any big differences. Im not using the SSR package, could this be the reason?

There is no errors. Would appreciate some help on how to debug this. Thanks.

Im using METEOR@1.4.4.2 with :
akryum:vue-component akryum:vue-less

and the following npm packages:
"vue": "^2.2.6", "vue-meta": "^0.5.5", "vue-meteor-tracker": "^1.2.0", "vue-router": "^2.3.0", "vuex": "^2.2.1", "vuex-router-sync": "^4.1.2"

Everything works great when running meteor --settings settings.json

2

Oh, so maybe I should have understood this but my components CSS did not work because I had removed standard-minifier-css@1.3.4 and added juliancwirko:postcss and less@2.7.9 in order to make Semantic UI work previously. Now my components CSS loads but not Semantic UI’s after adding standard-minifier-css@1.3.4 and akryum:vue-less

3

@nilsi Hey, I’m running into the same issue now, trying to deploy to production with Meteor/Vue but
not seeing my CSS… removing the juliancwirko:postcss and adding the standard minifier works, but than
I can’t use the postcss plugins i was using…

Have you gotten around this somehow? or is rewriting my CSS the only option?

thank you.

4

Hi,

Im not sure, I dont use any postcss plugins. I guess you already seen this issue on meteor-vue? https://github.com/Akryum/vue-meteor/issues/39

You could ask if theres any progress made on this. Let me know if you find a solution.

5

Thanks for your reply… I thought from your comments above you were using PostCSS…

Anyways, I submitted an issue and hopefully Akryum would be able to help.

I’m not using postcss inside vue components, only in .styl files… though I AM waiting for it to
work inside components also :slight_smile:

If anyone else is successfully deploying Meteor/Vue with juliancwirko:postcss package running,
please chip in here…

thx

1 Like
6

@webkit You can use my nathantreid:vue-css-modules package to handle the postcss processing. It ties into my main package, nathantreid:css-modules, which amongst other things allows you to configure your postcss pipeline. You can also disable the CSS modules piece, leaving you with a postcss processor.

Here’s an example that uses scoped stylus with custom postcss plugins inside .vue components: https://github.com/nathantreid/vue-component-test/commit/76a2afaa492e79751d5016141f288d16aaabe64b
The CSS modules plugin is configured via the cssModules attribute in package.json. In the example I’ve prevented the plugin from running on your .css files by changing the extension it handles to dontprocessanything. I’ve then customized the PostCSS plugins to use run postcss-autoreset. You can add other plugins here, in the order which they should run, just like with juliancwirko:postcss.

Since you’re not using CSS modules, it’s not as ideal as being supported directly within vue-component, but it should do the job for now. :slight_smile:

1 Like
7

@nathantreid thx for this solution, I’m now trying to use it a year later :wink:

I did as you said in your example trying to use Lost grid postcss plugin inside a .vue file,
but still it is not being compiled… not sure what I’m doing wrong…
Should I remove the juliancwirko package when I use yours?

thx for your help bro.