0.1.1 • Published 5 years ago
react-app-frame v0.1.1
This is a frame for react-app.Useing the create-create-app build.
react-app-rewired customize-cra
Use react-app-rewired and customize-cra to rebuild the webpack config.
babel-plugin-import
If you are using ant-design, maybe you need it.
react-redux redux
Use react-redux and redux to deal the data transmission.
react-i18next i18next i18next-browser-languagedetector i18next-xhr-backend
Use react-i18next, i18next, i18next-browser-languagedetector and i18next-xhr-backend to make the internationalization come true.
axios qs
react-router-dom
Use react-router-dom to achieve the routes jump
styled-jsx
Use styled-jsx to write the CSS
在使用 styled-jsx
进行项目开发的时候。使用的是 react-app-rewired customize-cra
需要安装插件 styled-jsx-plugin-postcss
并且需要在根目录下面添加 styled-jsx-plugin-postcss
的配置文件 postcss.config.js
。否则会报 No PostCSS Config found in 的错误。
这样才可以使用这种方式
import React from 'react'
import css from 'styled-jsx/css'
const p_style = css`p {font-size: 100px; color: red;}`;
const Home = (props) => {
return (
<div>
<p>Home</p>
<style jsx>{p_style}</style>
</div>
)
}
export default Home
同时。 config-overrides.js
需要添加babel插件,不要配置 .babelrc
文件,没用
module.exports = {
webpack: override(
addCustom(),
fixBabelImports('import', {
// libraryName: 'styled-jsx',
// libraryDirectory: 'es',
// style: 'css'
}),
addWebpackAlias({
"@": resolve("src")
}),
addBabelPlugins(
['styled-jsx/babel', { "plugins": ["styled-jsx-plugin-postcss"] }]
)
)
}