css - React bootstrap CSS Unexpected Token

问题描述

我正在尝试将 Bootstrap 与 SSR React 应用程序一起使用。我安装了几个引导 npm 包，但是在将 css 导入 React 组件时，我收到了一个意外的令牌错误。我确保我在 webpack 中有 css 加载器，从网上的示例来看，除了将 css 导入组件之外，我似乎不需要做任何事情。我不确定我做错了什么。

错误：

C:\Users\aw030085\OneDrive - Cerner Corporation\Desktop\test2\myssr\node_modules\bootstrap\dist\css\bootstrap.min.css:6
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:

SyntaxError: Unexpected token :
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.newLoader [as .js] (C:\Users\aw030085\OneDrive - Cerner Corporation\Desktop\test2\myssr\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

package.json 依赖：

"dependencies": {
    "bootstrap": "^4.4.1",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "immer": "^6.0.2",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-toastify": "^5.5.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/node": "^7.8.7",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-react": "^7.19.0",
    "jest": "^25.1.0",
    "nodemon": "^2.0.2",
    "npm-run-all": "^4.1.5",
    "serialize-javascript": "^3.0.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }

网络包：

const path = require("path");
const webpack = require('webpack');

module.exports = {
  entry: "./src/components/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /(\.css)$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      },
    }),
  ]
};

页眉.js

import React from 'react';
import { Navbar, Nav} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const Header = () => {

  return (
    <>
      <Navbar bg="light" variant="light">
        <Navbar.Brand href="/">Brand</Navbar.Brand>
        <Nav className="mr-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/world">World</Nav.Link>
        </Nav>
      </Navbar>
  </>
  )
}

export default Header;

标签： cssreactjstwitter-bootstrap

css - React bootstrap CSS Unexpected Token

问题描述

解决方案

推荐阅读