bootstrap.scss | SASS port of Twitter 's Bootstrap CSS toolkit | Theme library

It's sprockets directive

Sprockets is a gem for assets compiling

So there are few directives with such syntax

//= require - Add the contents of a file to current

//= require_self - Change order of where current contents are concatenated to current

//= require_directory - Add contents of each file in a folder to current

//= require_tree - Add contents of all files in all directories in a path to current

//= link - Make target file compile and be publicly available without adding contents to current

//= link_directory - Make target directory compile and be publicly available without adding contents to current

//= link_tree - Make target tree compile and be publicly available without adding contents to current

//= depend_on - Recompile current file if target has changed

//= stub - Ignore target file

These directives are parsed with Sprockets::DirectiveProcessor entity

And about how it works with other libraries

There is config.assets.paths in the app when you use sprockets. So sprockets search assets there. For example in node_modules folder. It looks that you install bootstrap using yarn and this style sheets are in that directory

But if you install with gem, this gem add to config.assets.paths its own paths

Heroku switched the default Node from 14 to 16 in Dec 2021 for the Ruby buildpack .

Heroku updated the heroku/ruby buildpack Node version from Node 14 to Node 16 (see https://devcenter.heroku.com/changelog-items/2306) which is not compatible with the version of Node Sass locked in at the Webpack version you're likely using.

To fix it do these two things:

1. Specify the 14.x Node version in package.json.

Have you defined a font-face in your scss file?

I have this below my imports

I think you'll need to import it with the extension:
import Application from './Application.vue'
And make sure you have the shims-vue.d.ts in your project.

I've managed to solve the issue: when including bootstrap-vue via vue add bootstrap-vue, you will be asked three questions:

• Use babel/polyfill? → Yes
• Use scss? → Yes
• Would you like to inject vars, functions and mixins in all SFC components? → If you answer "No" here, it will lead to the described error. Choose "Yes".

The last step that needs to be taken to make Bootstrap work properly, is importing the styles. You can do this by adding the following to your main.js:

You have to update your tsconfig.json and set target to es5:

Well, I think the reason is really clear. Watch the second line of the color.scss. You can find that you are importing style.scss there. That might be the reason of the @import loop

This is how I get it to work. I changed the scss file's code to something much simpler and made sure that the bootstrap.scss is located correctly. The one issue I found is that no matter what you do, u must @import the bootstrap file at the end. I dont know how to import only necessary files.

Oh, I find a solution. I can add this three imports (instead that one bootstrap imports):