node js webpack s css не отображается правильно - PullRequest
Новая
       0

node js webpack s css не отображается правильно

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

Я пытаюсь заставить мой s css правильно отображаться. Большинство из них работает нормально, но по какой-то причине нижний колонтитул не отображается правильно. Я использую node js и веб-пакет, оба из которых я относительно новичок. Я использую модули style-loader, css -loader и sass-loader. Большая часть css страницы работает, но по какой-то причине нижний колонтитул не работает. Это соответствующий код.

footer.s css: 

$font-stack: 'Montserrat', sans-serif;

footer{
    display: flex;
    justify-content: space-between;
    padding: 10px 40px;
    p{
        font: 50% $font-stack;
    }
}

index. html: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="/styles/style.scss">
        <link rel="stylesheet" href="/styles/form.scss">
        <link rel="stylesheet" href="/styles/header.scss">
        <link rel="stylesheet" href="/styles/footer.scss">


        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </head>

    <body>

        <header>
            <div class="logo">
                News Article Processing
            </div>
        </header>

        <main>
            <section>
                <div class="holder">
                <form class="form" onsubmit="return handleSubmit(event)">
                    <input id="URL" type="text" name="input" value="" onblur="onBlur()" placeholder="URL" size="48">
                    <input type="submit" id="input" class="button" name="" value="submit" onclick="return handleSubmit(event)" onsubmit="return handleSubmit(event)">
                </form>
                </div>
            <section>

            <section>
                <div class="results">
                    <div class="box">
                        <strong>Results:</strong>
                    </div>
                    <div class="box">
                        Polarity: <div id="polarity"></div>
                    </div>
                    <div class="box">
                        Subjectivity: <div id="subjectivity"></div>
                    </div>
                    <div class="box">
                        Text: <div id="text"></div>
                    </div>
                    <div class="box">
                        Polarity Confidence: <div id="polarityConfidence"></div>
                    </div>
                    <div class="box">
                        Subjectivity Confidence: <div id="subjectivityConfidence"></div>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <p>Michael Wycklendt      Udacity</p>
        </footer>

    </body>
</html>

Любая помощь будет принята с благодарностью.

Спасибо, Майкл

1 Ответ

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

Ваш подход неверен, потому что sass необходимо скомпилировать в css, чтобы запустить в веб-браузере, поэтому вам нужно настроить ваш веб-пакет следующим образом 

module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }

Вы можете найти полный код здесь

И поменяйте на html

<link rel="stylesheet" href="/styles/style.css">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...