将 .scss 文件导入 Reactenvironment 中的 .js 文件

Posted

技术标签:

【中文标题】将 .scss 文件导入 Reactenvironment 中的 .js 文件【英文标题】:Import .scss file into .js file in Reactenvironment 【发布时间】: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 文件。 【参考方案1】:

原来只需要重置/关闭服务器。昨天看了下,果然如愿。

【讨论】:

以上是关于将 .scss 文件导入 Reactenvironment 中的 .js 文件的主要内容,如果未能解决你的问题,请参考以下文章

Snowpack - 将 scss 导入 tsx

无法将 scss 文件导入到反应组件中

如何将 SCSS 文件导入 HTML 文件

将配置值从 json 文件导入到 scss

使用 Parcel、SASS 和 TypeScript 将 SCSS 文件作为 CSS 字符串导入

将 json 数据作为 .scss 文件中的 sass 变量导入 Nuxt