Javascript 节点js网页包SCS未正确显示_Javascript_Html_Css_Webpack_Sass

Javascript 节点js网页包SCS未正确显示

javascript html css webpack sass

Javascript 节点js网页包SCS未正确显示,javascript,html,css,webpack,sass,Javascript,Html,Css,Webpack,Sass,我正在努力让我的SCS正确显示。大部分工作正常，但由于某些原因，页脚显示不正确。我使用的是NodeJS和webpack，这两个工具我都是比较新的。我正在使用模块样式加载器、css加载器和sass加载器。页面的大多数SCS都正常工作，但由于某些原因页脚不正常。这是相关代码 footer.scss： $font-stack: 'Montserrat', sans-serif; footer{ display: flex; justify-content: space-between

我正在努力让我的SCS正确显示。大部分工作正常，但由于某些原因，页脚显示不正确。我使用的是NodeJS和webpack，这两个工具我都是比较新的。我正在使用模块样式加载器、css加载器和sass加载器。页面的大多数SCS都正常工作，但由于某些原因页脚不正常。这是相关代码

footer.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>


试验
新闻文章处理
结果：
极性：
主观性：
正文：
极性信心：
主观信心：
迈克尔·威克伦特·乌达西蒂

任何帮助都将不胜感激

谢谢,，

Michael

您的方法不正确，因为sass需要编译为css才能在web浏览器中运行，所以您需要像这样配置您的网页

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

您想要的页脚设计可以解释吗？