Loading bootstrap/scss/mixins into Vue scss component

Question

I have a vue app with a component using scss. I have installed sass-loader, and it all works great - except when i try to import bootstrap scss files.

This is the specific import thats failing:

<style lang="scss">
@import url("~bootstrap/scss/mixins");
...

I receive the following error:

This dependency was not found:

* -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!bootstrap/sc
ss/mixins in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-load
er/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=style&index=0&lang=scss&

To install it, you can run: npm install --save -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loade
r/src/index.js??ref--8-oneOf-1-2!bootstrap/scss/mixins

In comparison, the following import works fine:

<style lang="scss">
@import url("~bootstrap/dist/css/bootstrap.css");
...

From this it can be concluded that its not the reference to the NPM package thats failing per se. It seems like it is either because of a) i'm not referencing the specific _mixins.scss file correctly, or b) i have to configure my sass loader to be able to import scss files from NPM packages.

Does anyone have an ideas as to what I'm doing wrong? Any input is much appreciated.

Gabriel Willemann · Accepted Answer · 2020-03-31 13:01:45Z

You don't need to use URL function.

Try something like that:

<style lang="scss">
@import '~bootstrap/scss/mixins';
<style>

If you want to import all modules from Bootstrap, you may do this way:

<style lang="scss">
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

// Optional Modules
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/toasts';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';
<style>

Hiws · Accepted Answer · 2020-03-31 14:39:39Z

I wanted to offer up an alternative to those using a project built with vue-cli, since if you end up using the mixins in multiple components. It can get tedious to have to manually import them every time, while also adding extra code to your files.

You can setup sass-loader to inject css or scss into every component. This is handy when it comes to stuff like, mixins, functions and variables for SCSS.

Below I'm importing a single file called _theming.scss, this file imports Bootstraps mixins, variables and functions. This way i can freely use Bootstrap's variables for example in my components, and if i do any overrides in the _theming.scss file, these will be applied across my application too.

vue.config.js (if this file doesn't exist, create it in the root of your project where package.json is)

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_theming.scss";`
      }
    }
  }
};

_theming.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

Note: Just be aware to not place any css that gets rendered in the file your use in the prependData. Since this will add that css to every single component you have, even if you aren't using that css in the component, increasing your bundle size.

For example, if you changed the file _theming.scss to:

.text-red {
  color: red;
}

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

All your components would suddenly contain the css:

.text-red {
  color: red;
}

That's a great tip - thanks. I've used sass-resources loader in React projects to accomplish this, but your way seems simpler and more intuitive.

Collectives™ on Stack Overflow

Loading bootstrap/scss/mixins into Vue scss component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related