Comments (3)
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 &
right in the file. I think that if on react-inline-css.js, instead of replacing only the &
we could use some other keyword like base
or mao
😄 instead of supporting this in React Inline Css anyone could just do building by themselves.
from react-inline-css.
Thanks @moret I merged your PR. It's now possible to require SASS and LESS stylesheets to use with the <InlineCss>
component.
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.
from react-inline-css.
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)
from react-inline-css.
Related Issues (16)
- ID vs. Class? HOT 1
- Please upgrade babel dependencies HOT 1
- Unhandled promise rejection error HOT 1
- React 15 Support HOT 1
- Isomorphic Support HOT 3
- React.createClass is deprecated
- Keep an eye on React's support for <style> tags HOT 3
- Accessing PropTypes via the main React package is deprecated
- Local files not loading on Meteor
- Error: Can't resolve create-react-class HOT 2
- Allow to change the root selector, which is always # + componentName HOT 4
- Integrate Autoprefixer HOT 3
- Support for media queries? HOT 2
- Comma-separated rules aren't namespaced correctly HOT 1
- Warning: React attempted to reuse markup in a container but the checksum was invalid issue HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-inline-css.