Meteor-Community-Packages / meteor-postcss

PostCSS for Meteor

Home Page:https://packosphere.com/juliancwirko/postcss

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Imported style seems not being processed by postcss

zhaoyao91 opened this issue · comments

I have put a css file in some imports folder and import it in js file import './imports/styles/XXX.css', but it seems not being translated by postcss(autoprefixer).

Yes i have the same exact issue, except I am importing the raw scss file. This works to be inserted into my component but no autoprefixing is done. I opened an issue on four-seven but they closed it and redirected me here. Can you please help?

Hi, sorry, but this package is based only on Meteor's minifiers. Importing css in js files in Meteor works differently than importing css files in other css files. Sorry, but Meteor has a very weird build system, and it is almost impossible to maintain this package. With Webpack for example it all works without any additional work.

@juliancwirko so you suggest us to use meteor + webpack ?

no, I just think that Meteor's build system is very limited, so you need to choose between very good front-end workflow or Meteor ;) (at least at the moment) Maybe in the future it will be better. I rather go with Webpack without Meteor than spending hours to configure such simple tool like PostCSS.

so what backend do you prefer at the moment?

hmmm I guess it depends what you want to build, if this is some kind of heavy real time app and you need real time everywhere it could be difficult. You could take a look at the RethinkDB and maybe Horizon.io. Take a look at lovlijs or my simple boilerplate with demo app. Of course Horizon has its own limitations because it is young, but it is really good even at this stage.
If you need just a standard backend for your every standard app, you could go with every nodejs backend framework with usage of socket.io in some places if needed. And React or Vuejs on the front-end. You could also build your Webpack based build workflow and reuse it every time.
So on the nodejs backend you could choose Feathers, Hapi or even old good Express. You could also take a look at other programming languages and use something like Phoenix or even Laravel + Vuejs :) It all depends what you want to build. Anyways Meteor isn't good for all types of apps (at the moment of writing this of course).

Thanks for such a useful and helpful reply!

commented

Just want to jump back on topic for a moment since I'm having this same issue. I was using the fourseven:scss package to preprocess my stylesheets and it worked fine with the below structure. They all existed inside the imports directory and were correctly transpiled. I'm now switching over to postcss and finding it ignores the imports directory. To the point of this thread, is there a way to get postcss to run on files within the imports directory WITHOUT importing them all into a client-level stylesheet?

My particular structure is this:

/imports/components/
            /componentA/
                    componentA.jsx
                    componentA.css

import React from 'react';
import './componentA.css';

export const ComponentA = (props) => {

	return (
		<div className="component-a">
			<h3>whoopee!</h3>
		</div>
	);
}

you can also use preprocessor for imports. Take a look at: #24 I'll close it for now.