I faced a problem when trying to load bootstrap in my react app.
First try in app.js is causing an error:
import ‘bootstrap/scss/bootstrap.scss’;
/Users/dev/Projects/react/node_modules/bootstrap/scss/bootstrap.scss: Cannot create property ‘includePaths’ on string ‘scss/bootstrap.scss’
at SASSAsset.parse (/Users/dev/.nvm/versions/node/v10.13.0/lib/node_modules/parcel-bundler/src/assets/SASSAsset.js:27:23)
and another try in main.scss is causing another error:
@import ‘bootstrap/scss/bootstrap.scss’;
/Users/dev/Projects/react/src/css/main.scss:3:9: Can’t find stylesheet to import.
stdin 3:9 root stylesheet
Error: Can’t find stylesheet to import.
@import ‘bootstrap/scss/bootstrap.scss’;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
stdin 3:9 root stylesheet
I found that two solutions work for me:
Create .sassrc file with content:
{
"includePaths": [
"node_modules/",
"src/"
]
}
or create .sassrc.js with:
const path = require('path');
const CWD = process.cwd();
module.exports = {
"includePaths": [
path.resolve(CWD, 'node_modules'),
path.resolve(CWD, 'src')
]
};
My setup:
ParcelJS v1.10.3
React 16.6
NodeJS v10.13.0
npm v6.4.1