Question

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

目前，我有以下内容：

colname.split('_')[1]

如果我不从像这样的模块中导入类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; $ {styles [“ features”]} className={，则它将无法正常工作。

但是如您所见，某些className仍可与}一起使用

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

className="inner"

问题是，知道何时应使用样式或以正常方式调用类真的令人困惑。

是否有一种方法可以对所有内容使用默认方法？还是相反？

Answer 1

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

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>

编辑：在注释中澄清后，我认为gatsby-plugin-sass或CSS Modules并没有满足您的要求。您可能会更好地寻找另一种处理CSS的工具（例如stylable.io）

有没有一种无需样式即可导入scss的方法？

1 个答案: