node js webpack scss没有正确显示答案

【问题标题】：node js webpack scss not showing up correctlynode js webpack scss没有正确显示
【发布时间】：2020-06-02 10:29:40
【问题描述】：

我正在尝试让我的 scss 正确显示。其中大部分工作正常，但由于某种原因，页脚没有正确显示。我正在使用 node js 和 webpack，这两个我都比较陌生。我正在使用模块 style-loader、css-loader 和 sass-loader。大多数页面的 scss 都在工作，但由于某种原因，页脚没有。这是相关代码。

页脚.scss：

$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>

任何帮助将不胜感激。

谢谢你，迈克尔

【问题讨论】：

可以解释一下你想要的页脚设计是什么？

标签： javascript html css webpack sass

【解决方案1】：

您的方法不正确，因为需要将 sass 编译为 css 才能在 Web 浏览器中运行，因此您需要像这样配置您的 webpack

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

你可以找到完整代码here

并更改您的 html

<link rel="stylesheet" href="/styles/style.css">

【讨论】：