Trouble with importing scss file in sass and bootstrap collaboration

Question

I am using Sass with Bootstrap 4, and now I'm facing an issue in my Sass folder where I have an app.scss file that includes:

@import _customVariables.scss
@import node_modules/bootstrap/scss/functions
@import node_modules/bootstrap/scss/mixins

However, when I compile the Sass file, I encounter the following error:

sass --watch app.scss:style.css
 Error: Expected string.
 @import _customVariables.scss
         ^
 app.scss 1:9  root stylesheet

Since I'm new to Sass, can anyone explain why it's not importing the files correctly?

I noticed that it works only when I import the entire Bootstrap like this:

@import "../node_modules/bootstrap/scss/bootstrap"

Any assistance on this matter would be greatly appreciated.

Answer 1

Answer №1

If you're working with `scss`, make sure to use a string for the import value and exclude the underscore:

@import 'customVariables.scss';

According to the SASS documentation (https://sass-lang.com/guide#import):

For example, if you have Sass files named _reset.scss and base.scss, and you want to import _reset.scss into base.scss:

@import 'reset';

UPDATE: To demonstrate how all components work together, here's a functional example:

I've put together a project on codesandbox that includes `sass` and `bootstrap`, following the bootstrap guide to theme the build:

Answer 2

If you're working with `scss`, make sure to use a string for the import value and exclude the underscore:

@import 'customVariables.scss';

According to the SASS documentation (https://sass-lang.com/guide#import):

For example, if you have Sass files named _reset.scss and base.scss, and you want to import _reset.scss into base.scss:

@import 'reset';

UPDATE: To demonstrate how all components work together, here's a functional example:

I've put together a project on codesandbox that includes `sass` and `bootstrap`, following the bootstrap guide to theme the build: