Блог

Главная - Вопросы по программированию - Ошибка при настройке Bootstrap css в React

Ошибка при настройке Bootstrap css в React

#css #reactjs #sass #react-bootstrap

#css #reactjs #sass #react-bootstrap

Вопрос:

Я пытаюсь переопределить некоторые стили начальной загрузки в моем проекте React, используя sass. Однако я получаю сообщение об ошибке. Ниже приведен пользовательский файл.scss и ошибка, которую я получаю во время компиляции.

custom.scss

 code {
    background:#F8F8FF;
    border:black dashed 1px;
    padding:6px;
}​

// Import Bootstrap and its default variables
@use '~bootstrap/scss/bootstrap.scss';

Полная ошибка:

 ./src/scss/custom.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/scss/custom.scss)

SassError: expected "{".
  ╷
9 │ @use '~bootstrap/scss/bootstrap.scss';
  │                                      ^

Любые советы о том, как избавиться от этой ошибки, будут оценены.

Редактировать:

Дополнительная информация: я получаю { expected scss(css-lcurlyexpected) проблему в VSCode в разделе @use.

Комментарии:

1. Для импорта таблиц стилей используется ключевое слово @import

2. он будет заменен на @use . Ссылка: sass-lang.com/documentation/at-rules/import

3. В таком случае, используете ли вы версию sass, которая не поддерживает @use, но поддерживает @import ?

4. Нет, я использую последнюю версию. В любом случае замена @use на @import также воспроизводит ту же ошибку.

5. Попробуйте импортировать в первой строке в custom.css @use ‘~bootstrap/scss/bootstrap.scss’;