Package Exports

single-react-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (single-react-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

single-react-loader

中文版

write react in single file with webpack

feature

combine jsx and css in single file
support less,sass
support style scoped

example

//about.react
<script>
var About = ()=>{
  return (
    <div className='container'>
    about
    </div>
  )
}
export default About;
</script>

<style>
.container{
  color:red;
}
</style>

how to use

1.install the single-react-loader package with npm

npm install single-react-loader

2.config your webpack

//webpack.config.js
module: {
    loaders: [
        {
        test: /\.react$/,
        exclude: /node_modules/,
        loader: 'single-react'
        }
    ]
}

3.write single file react,and import

import About from 'About.react'

change stylesheet lang

// app.react
<script>
...
</script>
<style lang="scss(or less)">
...
</style>

make styleSheet privatization(or scoped)

// app.react
<script>
...
</script>
<style scoped>
...
</style>

What next

1.support sourceMap

~~2.support style scope~~

You can contact me if you have any idea.