我在Form.js
文件夹中有styled-ui
个文件。
Form.js
// input
export const FormControl = styled.input`
border-radius: 3px;
border: 1px solid #b2bec3;
padding: 0 10px;
height: 34px;
font-size: 15px;
outline: 0;
width: 100%;
`
然后我将Form.js文件导入样式为ui / index.js的
import * as Form from './Form'
import * as Section from './Section'
export default {
...Form,
...Section
}
这是我的conatiner文件,其中导入了样式组件
import {
FormControl
} from '@/styled-ui'
之后,当我使用它时,
<FormControl></FormControl>
我收到'@/styled-ui' does not contain an export named 'FormControl'.
的错误消息
但是,当我这样使用时,效果很好。
import styled from '@/styled-ui'
`<styled.FormControl></styled.FormControl>`
我正在使用webpack进行开发和生产
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
我现在很困惑。请告诉我如何解决此问题?
答案 0 :(得分:1)
import * as Form from './Form'
...
export default {
...Form,
...Section
}
在您的情况下,与写作相同
import * as Form from './Form'
...
export default {
FormControl: Form.FormControl,
...Section
}
这就是<styled.FormControl>
正常工作的原因。
您可能在index.js
文件中可以执行的操作类似于
export * from './Form'