在构建生产环境时，bootstrap 和 global.scss 中的样式将覆盖 NEXT JS 13.4.1

Question

此问题仅在为生产而构建时出现，在开发中样式显示正常。

引导样式根本不适用，只有 main.scss 上的样式有效。我找不到任何使用应用程序路由器 + bootstrap + scss 的示例代码。

这是文件结构：

**/app
--/css**
----main.min.css
----main.min.css.map
**--/scss**
----_fonts.css
----_header_footer.scss
----_mixins.scss
----_responsive.scss
----main.scss
--layout.jsx

在main.scss中导入的是：

@import "bootstrap/dist/css/bootstrap.css";
 @import "@fortawesome/fontawesome-free/css/all.min.css";
 @import "nouislider/dist/nouislider.min.css";
 @import "@splidejs/splide/dist/css/splide.min.css";
 @import "_mixins";
 @import "_header_footer";
 @import "_fonts";

在layout.jsx（RootLayout）中：

  import './css/main.min.css'

在开发中，所有样式都完美适用，只有在构建之后，我才遇到整个应用程序中 jsx 上的引导类不起作用的问题。

我尝试将此导入添加到layout.jsx文件中：

 import "bootstrap/dist/css/bootstrap.css";

有了这个，引导样式可以在构建上工作，但我的一些 scss 样式会下降，例如应用于正文的字体和锚标记的文本装饰，仅举几例。

我也试过这个：

将以下代码添加到_app.js：

import 'bootstrap/dist/css/bootstrap.css';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

我还尝试在 /app 根目录上创建一个 global.scss 文件，并导入 bootstrap.min.css 和我的 main.min.css：

我还尝试在 main.scss 文件中将 boostrap.min.css 的导入向下移动，同时省略导入中的“min”

Answer 1

Create a page pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          rel='stylesheet'
          href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Remove bootstrap CSS import from _app.js

在构建生产环境时，bootstrap 和 global.scss 中的样式将覆盖 NEXT JS 13.4.1

问题描述投票：0回答：1

1个回答

最新问题

在构建生产环境时，bootstrap 和 global.scss 中的样式将覆盖 NEXT JS 13.4.1

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1