1

我正在尝试制作包含引导程序的简单 NextJs 应用程序。

包.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
  }
}));

页面/_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} />;
  }
}

页面/index.tsx：

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

   export default Home;

我已经在_app.tsx里面进行了导入和使用，index.tsx但这在 localhost 中工作得非常好，但在部署的 vercel app 中却不行。(projectname.vercel.app)..

您能否帮我弄清楚我上面的代码做错了什么，导致引导 css 不能单独加载到生产环境中？

但是这个 css 导入import "../styles/styles.scss";在两种环境中都运行良好。

非常感谢提前。

4

0 回答 0