[Vuejs]-How to import Foundation breakpoint util into Vue-CLI project?

by

0👍

✅

My colleague managed to solve this.

  1. In the project root folder created a file called .sassrc:
{
  "includePaths": [ "node_modules" ]
}

  1. Removed @import '~foundation-sites/scss/util/breakpoint'; from _custom.scss.

  2. Changed vue.config.js to this (importing the whole foundation lib):

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "~@/scss/_custom.scss";
          @import 'foundation-sites/scss/foundation';
        `
      }
    }
  }
}

And now breakpoints util can be used within each Vue component with scoped css.

Leave a comment