Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Any plans to support something other then inline styles like PostCSS, CSS Modules and node-sass? #651

Closed
YarivGilad opened this issue Jan 4, 2017 · 4 comments
Closed

Any plans to support something other then inline styles like PostCSS, CSS Modules and node-sass? #651

YarivGilad opened this issue Jan 4, 2017 · 4 comments

Comments

@YarivGilad
Copy link

YarivGilad commented Jan 4, 2017 •
edited
Loading

Is there any reason why all Styling examples use inline CSS solutions?
Are there any plans to support popular pre-processors like node-sass, PostCSS or CSS Modules?
Is there a way to preprocess and use those for universal/server rendering?

CSS Modules is a popular solution for modular CSS (obviously...:), Many PostCSS plugins like rucksack for responsive font-size, px-to-rem and autoprefixer among others are indispensable...

Is there a way to use postcss and add its configuration to the underlying webpack config?

Is it possible to get an idea or better yet - an example or a guide that demonstrate how precompile/preprocess those solutions using them with Next 2.0.0-beta.xx ?

Thank you so much!
Ajar
@nkzawa
Copy link
Contributor

nkzawa commented Jan 4, 2017

I think you can just compile CSS before starting next and load the generated file using <Head /> or custom Document. Do you like to know something else ?

@arunoda
Copy link
Contributor

arunoda commented Jan 4, 2017

@Ajar-Ajar check this PR and issues mentioned in that.
See: #638

@iamjacks
Copy link

iamjacks commented Jan 4, 2017

I stopped using sass and css files, but when I did use them I was doing what @nkzawa suggested. I made a head component that acted as a wrapper for next/head to handle easily loading defaults/globals such as a main.css stylesheet. It accepted props and children to change the page title and extend it (e.g: adding another stylesheet file to the head etc.)

@timneutkens
Copy link
Member

Closing this based on given answers. Feel free to re-open when needed ❤️

@lock lock bot locked as resolved and limited conversation to collaborators May 12, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@arunoda @nkzawa @YarivGilad @timneutkens @iamjacks