这个问题只发生在为生产而构建时,在开发中样式显示正常。
bootstrap样式根本不起作用,只有main.scss上的样式起作用。我找不到任何使用app router + 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";
这样一来,bootstrap样式就可以在build上工作了,但是我的一些scss样式会下降,例如,应用于body的字体和锚标记的文本装饰都没有,仅举几例。
我也试过这个:
将以下代码添加到_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:
我也试过将boostrap.min.css的导入移到我的main.scss文件中,也省略了导入中的“min”
1条答案
按热度按时间vlf7wbxs1#