Css 有没有一种方法可以在不需要样式的情况下导入SCS？

我有一个带有scss的盖茨比应用程序

目前，我有以下几点：

import React from "react";
import styles from "./mosaic.module.scss";
import Tile from '../tile/tile';

const Mosaic = (): JSX.Element => (
    <section className="wrapper style1">
        <div  className="inner">
            <h2 className="major">Smaller Projects</h2>
            <p>Here under follow minor projects, often unfinished; I show them anyway because they helped me widen my experience. :)</p>
            <section className={`${styles["features"]}`}>
                {[0,1,2,3,4,5,6].map(e => <Tile key={e}></Tile>)}
            </section>
        </div>
    </section>
)

export default Mosaic;

如果我没有像这样从模块中导入类className={${style[features]}}，它将无法工作

但是正如您所看到的，一些className仍然使用className=internal

这是因为在gatsby-browser.js下，我导入了一些全局css，如下所示

导入。/src/styles/global.css

问题是，知道什么时候应该使用样式或以正常方式调用类确实令人困惑

---

有没有一种方法可以对所有事情都使用默认方式？还是相反

如果需要常规全局CSS，请将文件重命名为mosaic.scss，导入该文件，然后像往常一样应用类名

import "./mosaic.scss";
...
<section className='features'>...</section>

或

---

编辑：在你在评论中澄清之后，我不认为盖茨比插件sass或CSS模块能满足你的需要。您可能会更幸运地找到另一个工具来处理您的css eg

，但我相信这不会使类的作用域限定到组件实际上是的，我确认这会使SCS的作用域不限定到组件onlySure。但是你特别问有没有一种方法可以在所有事情上都使用默认方式？啊，是的，的确如此，但我认为问题中暗示有没有一种方法可以在所有事情上都使用默认方式？在不失去当前功能的情况下，我现在明白了。我猜你是在寻找类似Angular的范围样式的工作方式？

import styles from "./mosaic.css";
...
<section className={styles.features}>...</section>

import {features} from "./mosaic.css";
...
<section className={features}>...</section>