Далее js объединение Bootstrap и модулей компонентов sass с областью видимости приводит к неопределенным классам - PullRequest
Новая
       145

Далее js объединение Bootstrap и модулей компонентов sass с областью видимости приводит к неопределенным классам

0 голосов
/ 05 августа 2020

При добавлении пользовательских bootstrap тем в мой проект Next Js я столкнулся с проблемой, когда мои классы модулей sass с заданной областью видимости для моих компонентов всегда отображались как «undefined». См. Следующий снимок экрана: инспектор, показывающий неопределенные классы

Я хочу иметь возможность настроить свой проект Next Js, чтобы я мог использовать функции тематики bootstrap, а также использовать модули sass с заданной областью для моих компонентов.

Следующие ниже фрагменты дают вам представление о моей текущей настройке.

next.config. js

const withSass = require('@zeit/next-sass')

module.exports = withSass({
    cssLoaderOptions: {
        importLoaders: 2,
    },
})

package. json

{
  "name": "rijmaat",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "bootstrap": "^4.5.1",
    "next": "9.4.4",
    "node-sass": "^4.14.1",
    "react": "16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-dom": "16.13.1",
    "sass": "^1.26.10"
  },
  "devDependencies": {
    "@types/node": "^14.0.26",
    "@types/react": "^16.9.43",
    "typescript": "^3.9.7"
  }
}

_app. js

import '../assets/scss/main.scss'

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

main.s css

// Static vendors
@import 'vendors/fonts';
@import 'vendors/variables';
@import 'vendors/mixins';

// Imports SCSS theme
@import 'themes/theme';

// Base layout components
@import 'base/base';
@import 'base/functions';

// Components -> neccessary?

// Bootstrap vendor
@import 'vendors/bootstrap';

Footer.module.s css

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background-color: var(--grey-darker);
}

.nav-list {
    &__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 25px;
    }
    &__body {
        list-style: none;
        padding-inline-start: 0;

        > li > a {
            font-size: 16px;
            font-weight: 300;
            line-height: 25px;
            color: var(--text-color-alt);
            opacity: 0.7;
            transition: opacity 0.2s;
            &:hover {
                text-decoration: none;
                opacity: 0.5;
            }
        }
    }
}

.divider {
    background-color: var(--grey-dark);
}

.copyright {
    list-style-type: none;
    padding: 0px;
    display: table;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    > li {
        display: inline;
        margin: 0px 15px 0px 15px;
        a {
            transition: opacity 0.2s;
            &:hover {
                text-decoration: none;
                opacity: 0.5;
            }
        }
        > a,
        span {
            font-size: 14px;
            font-weight: 100;
            line-height: 25px;
            color: var(--text-color-alt);
            opacity: 0.7;
        }
    }
}

Footer.tsx 

import styles from './Footer.module.scss'
import { Form, FormGroup, Button } from 'react-bootstrap'

const Footer = () => (
    <footer className={`${styles.footer} footer main-footer text-light`}>
        <div className="container">
            {/* Helpful socials */}
            <div className="row">
                {/* Column 1 - Help image */}
                <div className="col-md-4 col-sm-6">
                    <div>Image</div>
                </div>

                {/* Column 2 - Socials */}
                <div className="col-md-4 col-sm-6">
                    <h6>Volg ons</h6>
                    <h6>Download onze app</h6>
                </div>
                {/* Column 3- Newsletter */}
                <div className="col-md-4 col-sm-6">
                    <h6>Download onze app</h6>
                    <p>Lorem ipsum Lorem ipsum</p>
                    <Form>
                        <Form.Group controlId="formBasicEmail">
                            <Form.Control
                                type="email"
                                placeholder="E-mailadres"
                            />
                            <Form.Text className="text-muted">
                                We'll never share your email with anyone else.
                            </Form.Text>
                        </Form.Group>

                        <Button variant="primary" type="submit">
                            Inschrijven
                        </Button>
                    </Form>
                </div>
            </div>
            {/* Divider */}
            <hr className={`${styles.divider}`} />

            {/* Linkbuilding */}
            <div className="row">
                {/* Column 1 - Provinces */}
                <div className={`${styles['nav-list']} col-md-2 col-sm-6`}>
                    <h6 className={`${styles['nav-list__title']} text-light`}>
                        Provincies
                    </h6>
                    <ul className={styles['nav-list__body']}>
                        <li>
                            <a href="">Drenthe</a>
                        </li>
                        <li>
                            <a href="">Flevoland</a>
                        </li>
                        <li>
                            <a href="">Friesland</a>
                        </li>
                        <li>
                            <a href="">Gelderland</a>
                        </li>
                        <li>
                            <a href="">Groningen</a>
                        </li>
                        <li>
                            <a href="">Limburg</a>
                        </li>
                        <li>
                            <a href="">Noord-Brabant</a>
                        </li>
                        <li>
                            <a href="">Noord-Holland</a>
                        </li>
                        <li>
                            <a href="">Overrijsel</a>
                        </li>
                        <li>
                            <a href="">Utrecht</a>
                        </li>
                        <li>
                            <a href="">Zeeland</a>
                        </li>
                        <li>
                            <a href="">Zuid-Holland</a>
                        </li>
                    </ul>
                </div>

                {/* Column 2 - operating cities*/}
                <div className={`${styles['nav-list']} col-md-2 col-sm-6`}>
                    <h6 className={`${styles['nav-list__title']} text-light`}>
                        Steden
                    </h6>
                    <ul className={styles['nav-list__body']}>
                        <li>
                            <a href="">Amsterdam</a>
                        </li>
                        <li>
                            <a href="">Den Haag</a>
                        </li>
                        <li>
                            <a href="">Rotterdam</a>
                        </li>
                        <li>
                            <a href="">Eindhoven</a>
                        </li>
                        <li>
                            <a href="">Utrecht</a>
                        </li>
                        <li>
                            <a href="">Groningen</a>
                        </li>
                    </ul>
                </div>

                {/* Column 3 - Newly joined driving schools*/}
                <div className={`${styles['nav-list']} col-md-3 col-sm-6`}>
                    <h6 className={`${styles['nav-list__title']} text-light`}>
                        Nieuwe aangesloten rijscholen
                    </h6>
                    <ul className={styles['nav-list__body']}>
                        <li>
                            <a href="">Rijschool Prima</a>
                        </li>
                        <li>
                            <a href="">Rijscgool A Klasse</a>
                        </li>
                        <li>
                            <a href="">Rijschool Huigsloot</a>
                        </li>
                        <li>
                            <a href="">Rijschool Enjoy</a>
                        </li>
                        <li>
                            <a href="">Rijschool Amersen</a>
                        </li>
                        <li>
                            <a href="">Autorijschool De Gouden Raaf</a>
                        </li>
                        <li>
                            <a href="">Rijschool Juliana</a>
                        </li>
                        <li>
                            <a href="">Rijschool Boskoop</a>
                        </li>
                        <li>
                            <a href="">Rijschool Vlietland</a>
                        </li>
                    </ul>
                </div>

                {/* Column 4 - About Rijmaat*/}
                <div className={`${styles['nav-list']} col-md-2 col-sm-6`}>
                    <h6 className={`${styles['nav-list__title']} text-light`}>
                        Over Rijmaat
                    </h6>
                    <ul className={styles['nav-list__body']}>
                        <li>
                            <a href="">Klantenservice</a>
                        </li>
                        <li>
                            <a href="">Over ons</a>
                        </li>
                        <li>
                            <a href="">Blog</a>
                        </li>
                        <li>
                            <a href="">Geslaagden</a>
                        </li>
                        <li>
                            <a href="">Voor leerlingen & ouders</a>
                        </li>
                        <li>
                            <a href="">Inloggen</a>
                        </li>
                    </ul>
                </div>

                {/* Column 5 -*/}
                <div className={`${styles['nav-list']} col-md-3 col-sm-6`}>
                    <h6 className={`${styles['nav-list__title']} text-light`}>
                        Zakelijk
                    </h6>
                    <ul className={styles['nav-list__body']}>
                        <li>
                            <a href="">Rijschool aanmelden</a>
                        </li>
                        <li>
                            <a href="">Rijschool inlog</a>
                        </li>
                    </ul>
                </div>
            </div>

            {/* Divider */}
            <hr className={`${styles.divider}`} />

            {/* Footer Bottom - Copyright and legalities */}
            <div className="container">
                <ul className={styles.copyright}>
                    <li>
                        <a href="https://rijmaat.nl/goedomteweten/privacy">
                            Privacy
                        </a>
                    </li>
                    <li>
                        <a href="https://rijmaat.nl/goedomteweten/algemene-voowaarden">
                            Algemene voorwaarden
                        </a>
                    </li>
                    <li>
                        <a href="https://rijmaat.nl/goedomteweten/cookies">
                            Cookies
                        </a>
                    </li>
                    <li>
                        <span>&copy;{new Date().getFullYear()} Rijmaat</span>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
)

export default Footer
...