使用 SCSS 將 Next.js 升級到版本 12 Bootstrap 后不再作業。
我有一個global.scss檔案，它被匯入到_app.js. 在這個檔案中，我匯入了 Bootstrap 和 Bootstrap 圖示。
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-icons/font/bootstrap-icons.css';
它作業得很好，但在升級到 Next.js 12 之后就不行了。現在我收到一個匯入錯誤，我不知道如何解決它。
./styles/global.scss:5:0
Module not found: Can't resolve '../node_modules/bootstrap/scss/forms/data:image/svg xml,<svg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke=''
Import trace for requested module:
./styles/global.scss
./pages/_app.jsx
https://nextjs.org/docs/messages/module-not-found
uj5u.com熱心網友回復：
這是一種臨時解決方法。
$form-check-input-checked-bg-image: none;
$form-check-radio-checked-bg-image: none;
$form-check-input-indeterminate-bg-image: none;
$form-switch-bg-image: none;
$form-switch-focus-bg-image: none;
$form-switch-checked-bg-image: none;
$form-select-indicator: none;
$form-feedback-icon-valid: none;
$form-feedback-icon-invalid: none;
$navbar-light-toggler-icon-bg: none;
$navbar-dark-toggler-icon-bg: none;
$accordion-button-icon: none;
$accordion-button-active-icon: none;
$carousel-control-prev-icon-bg: none;
$carousel-control-next-icon-bg: none;
$btn-close-bg: none;
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-icons/font/bootstrap-icons.css';
uj5u.com熱心網友回復：
我自己剛剛遇到這個問題并使用 Cosmo 解決方法，但是在使用復選框時遇到了問題，缺少勾號圖示。要解決此問題，您可以將 bootstrap _variables.scss url("you copy this text") 中的影像復制到新檔案并將其保存為 svg。
并將 Cosmo 解決方法從無更改為這個新的 svg 路徑。
_variables.scss
$form-check-input-checked-bg-image: url("copy this text here") !default;
new_svg.svg
paste the text here and save
global.scss
$form-check-input-checked-bg-image: url("path/to/new/new_svg.svg");
注意：您可能需要在路徑中使用“../../../”，因為它會從 bootstrap node_modules 檔案夾中查找檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/361249.html
上一篇：樣式問題：文本裝飾無不起作用