Как использовать модули Sass и CSS с приложением create-реагировать? - PullRequest
0 голосов
/ 10 января 2020

я использую fileName.module.s css, чтобы стилизовать мои реагирующие элементы

this is my component
import React from "react";

import Aux from '../../hoc/Aux';
import classes from './Layout.module.scss';

const layout = (props) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main className={classes.Content}>
            {props.children}
        </main>
    </Aux>
);

export default layout;

, и это мой s css

.Content {
    margin-top: 72px;
    color:red;
}

я не знаю почему, но s css не отражает мои основные элементы и идеи?

спасибо

Ответы [ 2 ]

0 голосов
/ 10 января 2020

Если вы используете последнюю версию create-react-app, которая поддерживает sass по умолчанию, и я предполагаю, что Layout.module.scss соответствует css имени файла.

используйте import './Layout.module.scss'; вместо import classes from './Layout.module.scss';

тогда вы можете напрямую вызвать className

<main className={Content}>
 {props.children}
</main>
0 голосов
/ 10 января 2020

Вы можете go с помощью этой документации

Существует также опция предварительной обработки SASS с использованием node-sass-chokidar и добавление "sass:watch": "node-sass-chokidar <scss directory> -o <compiled css directory> --watch" к вашему scripts для отслеживания изменений .

...