我试图使简单的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";
在这两种环境中都运行得很好。
提前感谢。
1条答案
按热度按时间2q5ifsrm1#
在_app.js文件顶部或在layout.js文件顶部的next 13中添加此import语句
对我很有效