在 React 环境中将 .scss 文件导入 .js 文件

Question

Global.scss

/src/styles/global/Global.scss

.grid {
    display: grid;
}

Meta.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;

Footer.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;

class .grid 未从 Global.scss 文件加载到 Footer.js。

理论上，我认为这会起作用，但 .grid 样式没有加载到 page.Any 帮助中，将不胜感激！

Answer 1

原来服务器只需要重置/关闭。昨天看了看，它按预期工作。

在 React 环境中将 .scss 文件导入 .js 文件

Import .scss file into .js file in Reactenvironment

css

grid

components

jsx

reactjs