Есть ли способ импортировать s css без необходимости стиля? - PullRequest
Новая
       14

Есть ли способ импортировать s css без необходимости стиля?

0 голосов
/ 21 февраля 2020

У меня есть приложение Gatsby с s css.

На данный момент у меня есть следующее: 

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"

Проблема в том, что очень сложно понять, когда класс должен вызываться со стилями или обычным способом .

Есть ли способ просто использовать способ по умолчанию для всего? или наоборот?

1 Ответ

1 голос
/ 21 февраля 2020

Если вы хотите обычный глобальный CSS, переименуйте ваш файл в mosaic.scss, импортируйте файл, а затем примените ваши classNames как обычно. 

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

Когда вы используете *.module.scss extension, вы на самом деле говорите gatsby-plugin-sass, что вы будете sh использовать CSS модулей .

Если вы sh будете использовать 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 )

...