Webpack破坏了样式化组件和自举样式的部分

Question

我不是前端人员，我的个人档案页面是我使用React + Webpack时遇到的很多问题的第一个页面。我可能应该从一开始就从webpack和webpack-dev服务器开始，但是很好。

由于存在Webpack，因此不同组件的样式不正确。例如，这是我的导航栏组件。

Navigationbar.js

import React from "react";
import { Nav, Navbar, Container } from "react-bootstrap";
import styled from "styled-components";

const Styles = styled.div`
  .navbar {
    background-color: #1b242f;
    border-bottom: 3px solid #04c2c9;
    margin-bottom: 20px;
  }

  a,
  .navbar-brand,
  .navbar-nav .nav-link {
    color: #efefef;

    &:hover,
    &:focus,
    &:active {
      color: #e31b6d;
    }
  }

  .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(239,239,239, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

    &:hover {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(227,27,109, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
  }
`;

const NavigationBar = () => {
  return (
    <Styles>
      <Navbar expand="lg">
        <Container>
          <Navbar.Toggle aria-controls="basic-navbar-nav" className="ml-auto" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <Nav.Item>
                <Nav.Link href="/about/#about">About</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link href="/portfolio/#portfolio">Portfolio</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link href="/contact/#contact">Contact</Nav.Link>
              </Nav.Item>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </Styles>
  );
};

export default NavigationBar;

webpack.config.js

const path = require("path");
const autoprefixer = require("autoprefixer");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    chunkFilename: "[id].js",
    publicPath: "/",
  },
  externals: {
    jquery: "jQuery",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]",
              },
              sourceMap: true,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [autoprefixer({})],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "url-loader?limit=10000&name=img/[name].[ext]",
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/public/index.html",
      filename: "index.html",
      inject: "body",
    }),
  ],
};

可以使用react-scripts start进行样式设置，而不能使用webpack-dev-server --open --hot --mode development进行样式设置。

我在webpack编译器中没有任何错误，但是在浏览器控制台DevTools failed to load SourceMap ...中却有一些错误。不知道这是否相关。

有趣的是，我的页脚也很完美，同时它还是一个导航栏。

footer.js

import React from "react";
import { Navbar, Container, Card } from "react-bootstrap";
import styled from "styled-components";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { fab } from "@fortawesome/free-brands-svg-icons";

library.add(fab);

const Styles = styled.div`
  .navbar {
    background-color: #1b242f;
    border-top: 3px solid #04c2c9;
    margin-bottom: 0px;
    padding: 30px;
  }

  .card {
    padding: 15px;
    background-color: #262f38;
    color: #efefef;
    transition: 0.5s;
    margin: 0 15px;
  }

  .card:hover {
    transform: rotate(45deg);
    color: #e31b6d;
    transition: 0.5s;
  }

  .social {
    align-items: center;
    display: flex;
    justify-content: center;
  }
`;

const Footer = () => {
  return (
    <Styles>
      <Navbar expand="lg">
        <Container className="social">
          <a
            href="https://www.linkedin.com/"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Card>
              <FontAwesomeIcon
                icon={["fab", "linkedin-in"]}
                size="1x"
              ></FontAwesomeIcon>
            </Card>
          </a>
        </Container>
      </Navbar>
    </Styles>
  );
};

export default Footer;

任何提示或解决方案均受到高度赞赏。

亲切的问候。