NextJ中未加载 Bootstrap

jdzmm42g  于 2023-06-22  发布在  Bootstrap
关注(0)|答案(1)|浏览(95)

我试图使简单的NextJs应用程序,我包括引导。

Package.json:

"dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "autoprefixer": "^9.8.6",
    "bootstrap": "^4.5.3",         <----------------------------
    "next": "^10.0.3",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.5.1",
    "node-sass": "^5.0.0",
    "postcss": "^7.0.35",
    "postcss-easy-import": "^3.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-multi-carousel": "^2.5.5",
    "reactstrap": "^8.7.1",
    "sass": "^1.29.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
  },

next.config.js:

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');

module.exports = withSass(withCss({
  webpack (config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          publicPath: './',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    });

    return config
  },
  cssLoaderOptions: {
    url: false
  }
}));

pages/_app.tsx:

import React from "react";
import App from "next/app";

import 'bootstrap/dist/css/bootstrap.min.css';
import "react-multi-carousel/lib/styles.css";
import "../styles/styles.scss";

export default class ClnUi extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

pages/index.tsx:

const Home = () => (
       <div class="container">
         This is a container div..
       </div>
    )

   export default Home;

我已经在_app.tsx中导入并在index.tsx中使用,但这在localhost中工作得很好,但只是不在部署的vercel应用程序中(projectname.vercel.app)..
你能帮我弄清楚我上面的代码做错了什么,导致引导css不能单独在生产环境中加载吗?
但是这个css import import "../styles/styles.scss";在这两种环境中都运行得很好。
提前感谢。

2q5ifsrm

2q5ifsrm1#

在_app.js文件顶部或在layout.js文件顶部的next 13中添加此import语句

import 'bootstrap/dist/css/bootstrap.min.css'; // Import bootstrap CSS

对我很有效

相关问题