为什么在使用 scss 和 css 时没有设置背景颜色？

Question

我在我的项目中使用scss 和css。我有两个文件styles.css 和styles.css。我在_app.js 中导入了这两个文件

import "../styles.scss";
import Head from "next/head";
import React from "react";
import App from "next/app";
import "../styles.css";

在style.css

a {
  color: red;
}

在我的styles.scss

body {
  background-color: aqua
}

但是background color 没有设置。我不知道为什么没有设置。我还使用scss loader 来编译我的scss 文件。

这是我的代码 https://codesandbox.io/s/sharp-jennings-upb7y?file=/styles.scss:0-33

注意 ::T运行这个项目你需要创建新的终端并运行命令npm run dev。因为它运行在3004端口

我的webpack-config

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

module.exports = (phase, { defaultConfig }) => {
  return withCss(
    withSass({
      webpack(config, { isServer }) {
        config.module.rules.push({
          rules: [
            {
              test: /\.s[ac]ss$/i,
              use: [
                {
                  loader: "sass-loader",
                  options: {
                    additionalData: `$public_font_url: ${process.env.NEXT_PUBLIC_FONTS};`
                  }
                }
              ]
            }
          ]
        });
        return config;
      }
    })
  );
};

Answer 1

这里是解决方案，你必须使用next.js提供的Head标签，你的配置文件没有问题

https://codesandbox.io/s/relaxed-sea-khlgr?file=/pages/index.js