【发布时间】:2021-11-03 22:10:52
【问题描述】:
全局.scss
/src/styles/global/Global.scss
.grid {
display: grid;
}
元.js
/src/components/Meta.js
此文件包含 .scss 文件的导入语句
import "../styles/global/Global.scss";
index.js
/src/pages/index.js
此文件包含组件 import Meta from '../components/Meta'; 的导入语句
紧随其后
function Home() {
return (
<div className="container">
<Meta />
<Header />
<p>Hello world!</p>
<Footer />
</div>
)
}
export default Home;
页脚.js
/src/components/Footer.js
class Footer extends React.Component {
render() {
return (
<footer className="container grid">
<div className="footer-primary-nav">
<p>Primary Nav</p>
</div>
</footer>
);
}
}
export default Footer;
类.grid 没有从Global.scss 文件加载到Footer.js。
在纸面上,我认为这会起作用,但页面上没有加载 .grid 样式。任何帮助将不胜感激!
【问题讨论】:
-
应该可以,能不能换成css再试一下。
-
我不会那样做的。那是偷工减料。我正在自学,因为我正在做这个项目,它必须是一个 .scss 文件。
标签: css reactjs grid components jsx