-
Notifications
You must be signed in to change notification settings - Fork 16
Compiling with Babel plugin for SASS, LESS and prefixing #4
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.
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
Comments
Hello @RickWong . I read this issue and tried an experiment of running the building steps via webpack loaders. Something like this: component.js import React from 'react';
import InlineCss from 'react-inline-css';
let css = require('!raw!sass!./component.scss');
class Component extends React.Component {
render() { return <InlineCss stylesheet={css}>Mao! Mao! Mao!</InlineCss>; }
};
export default Transmit.createContainer(Component); component.css & {
color: red;
} But the sass-loader complains about the use of |
Thanks @moret I merged your PR. It's now possible to require SASS and LESS stylesheets to use with the However it would still be cool to write SASS and JSX in the same file. That's the main purpose of this project: to style components inline. I would love to hear your take on how to accomplish that. |
Great to see it merged, I'll start using it immediately! Yeah, I can't find yet a better trade-off. On the plus side, having a fully valid external stylesheet file plays nice with most basic syntax highliting. 8) I was checking on Radium as well to see how they are going with both inline styles and Javascript declaration. They have another set of trade-offs with the Javascript declaration - not easily pre-compiling is one of them. Within React Inline CSS other approaches could be tried. Perhaps moving the processing to a dedicated loader would allow both pre-processing the component JS file itself - like React Inline does - and allow style bundling to those who like it. I'll keep thinking about it. 8) |
One major annoyance is the lack of automatic vendor prefixing of certain CSS attributes. It doesn't really make sense to add them at run-time. It would be beneficial to the performance to pre-compile the written CSS much like JSX. At that point it might be a small step to include a SASS/LESS hook so it's possible to make the inline CSS stylesheets shorter and more composed.
The text was updated successfully, but these errors were encountered: