我刚开始使用react.js和create-react-app应用程序,所以如果这是一个显而易见的问题,请原谅我。
我的'src'文件夹结构如下:
在 App.js 中,我有这个:
在组件A中,我有这个:
在
我想做的就是从“ComponentA”中导入“ComponentB”,并且也导入“ComponentA”的样式,但是所有这些都失败了,并显示以下消息:
如果我移除CSS导入,就会出现另一个错误消息:
如何从一个组件导入另一个组件及其相应的 CSS?
谢谢。
我的'src'文件夹结构如下:
scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES
在 App.js 中,我有这个:
import React, { Component } from 'react';
import ComponentA from './components/ComponentA';
class App extends Component {
render() {
return (
<div className="App">
<ComponentA />
</div>
);
}
}
export default App;
在组件A中,我有这个:
import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';
class ComponentA extends Component {
render() {
return (
<div className="componentAStyle">
<ComponentB />
</div>
);
}
}
export default ComponentA;
在
ComponentB
中,我有这个:import React, { Component } from 'react';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
我想做的就是从“ComponentA”中导入“ComponentB”,并且也导入“ComponentA”的样式,但是所有这些都失败了,并显示以下消息:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
如果我移除CSS导入,就会出现另一个错误消息:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './components/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
如何从一个组件导入另一个组件及其相应的 CSS?
谢谢。
import '../styles/ComponentA.css';
它会返回上一级并进入styles文件夹。你也可以使用'../../'返回上两级文件夹,以此类推。你需要计算你距离src文件夹有多远,然后不断添加'../'直到到达目标文件夹。 - Kevin Mccarthy