有没有一种不需要样式就可以导入 scss 的方法？

Question

我有一个带有 scss 的 Gatsby 应用程序。

目前我有以下内容：

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={${styles["features"]}} 这样的模块中导入类，它将无法工作。

但正如你所见，一些 className 仍然适用于 className="inner"

这是因为在 gatsby-browser.js 下我导入了一些像这样的全局 css

import "./src/styles/global.css"

问题是，知道何时应该使用样式或以正常方式调用一个类真的很混乱。

有没有办法对所有事情都使用默认方式？还是相反？

Answer 1

如果您想要常规的全局 CSS，请将您的文件重命名为 mosaic.scss，导入该文件，然后照常应用您的类名。

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

---

当您使用*.module.scss 扩展时，您实际上是在告诉gatsby-plugin-sass 您希望使用CSS Modules。

如果你想使用 CSS 模块，那么你必须这样做：

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

或

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

---

编辑：在您在 cmets 中澄清之后，我不认为 gatsby-plugin-sass 或 CSS Modules 做你想做的事。寻找另一种处理 CSS 的工具（例如 stylable.io）可能会更好