CODEWITHSUNDEEP
npmvue.jssasszurb-foundationvue-cli
Dave Merwin
Dave Merwin

Reputation: 1412

Configuring Foundation 6 and Vue-CLI

I'm starting my first really big Vue project. I have some legacy Foundation styling that I want to include. In my non CLI created projects I would use GULP to compile my SASS files.

But now I want to include the _settings.scss file into my App and then customize the settings as I want them to be. But how do I do that?

I have all the SASS libraries installed via NPM, but I can't figure out where to do the following:

Where do I put the custom _settings.scss file so I can control the settings If I try to include the file in the main.js the whole thing blows up.

I'm new to the vue-cli but have used Vue and Foundation for a while. Getting a little lost in the new awesoness.

Any suggestions?

Upvotes: 1

Views: 2063

Answers (1)

ddprrt
ddprrt

Reputation: 7574

I'm not fully familiar with Foundation 6, so I don't know how you have added it previously. But here is how I managed to get it running without troubles:

I assume you have installed:

  1. Vue with the CLI. A Webpack based project
  2. Foundation via NPM. npm install --save foundation-sites

If this deviates, please let me know.

First step: Let's teach Vue.js how to parse SCSS, because all your files are SCSS.

npm install sass-loader node-sass style-loader --save-dev

Next: Copy your old _settings.scss file next to your App.vue file that has been created by the Vue CLI. Open the App.vue file and change the styles part to the following:

<style lang="scss">
@import "_settings.scss";
@import "~foundation-sites/scss/foundation.scss";
@include foundation-button;

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

What did we do? Let's go line by line

  1. <style lang="scss">. We told Vue that this is a SCSS file and should be parsed by SCSS
  2. @import "_settings.scss";. We import your old Settings file. Most of those settings just override variables anyway.
  3. @import "~foundation-sites/scss/foundation.scss"; We import foundation from the node_modules directory. Look at the tilde in front of it. This tells Vue to look for the node_modules directory, then it follows the files inside them.
  4. @include foundation-button; We activate the button. Because Foundation 6 has no components activated by default to save space.

And that's it. I created a settings file where I change the button background to crimson and got this:

Vue with a Zurb button

Hope this helps

Upvotes: 5

Related Questions