Импорт SASS Bootstrap в React
Я последовал инструкциям, включенным в документацию Bootstrap https://getbootstrap.com/docs/4.0/getting-started/download/#npm, и установил Bootstrap через Webpack.
Затем я хотел импортировать стили css, как здесь https://getbootstrap.com/docs/4.0/getting-started/theming/ AND
У МЕНЯ ВОЗНИКНУЛА ПРОБЛЕМА:
Когда я добавляю этот импортный (@import "node_modules/bootstrap/scss/bootstrap";) в свой файл custom.scss и заказываю sass --watch custom.scss:custom.css в консоли, я получаю две ошибки:
1) Error: Cannot find module
"-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!../../node_modules/bootstrap/scss"
2)./src/tu_sassy/custom.css Module not found: Can't resolve
'../../node_modules/bootstrap/scss' in
'/home/zebra/Desktop/testowa/src/tu_sassy'
Моя файловая структура аналогична документации Bootstrap, как показано на скриншоте ниже.
! Для большего мне нужно добавить, что, когда я удаляю этот импорт из custom.scss, все работает как шарм ... И все еще можно повторно использовать и не повреждать исходную таблицу стилей Bootstrap 'моя собственная таблица стилей' ПОЧЕМУ?
Ответы 1
Один быстрый совет. Если вы хотите написать встроенный код в своем сообщении StackOverflow, используйте обратные кавычки (`) вокруг кода. Это значительно упрощает чтение вашего сообщения.
У Sass есть собственная функциональность для импорта из узловых модулей. Загрузчик Webpack Sass предоставляет префикс ~ (тильда) как способ сообщить компилятору, что он должен разрешить путь из папки node_modules.
@import "~bootstrap/scss/bootstrap";
Если у вас есть дерево зависимостей пакетов в node_modues, которые импортируют файлы sass, вы также можете указать загрузчику Webpack Sass включить node_modules для разрешения путей:
{
loader: "sass-loader", // compiles Sass to CSS
options: {
includePaths: [
join(dirname(module.filename), 'node_modules')
]
}