Cannot create property ‘includePaths’ on string ‘scss/bootstrap.scss’ || Can’t find stylesheet to import.

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

Leave a Reply

Your email address will not be published. Required fields are marked *