Menu icon Foundation
Try to use Foundation with vuejs

I try to integrate foundation with vuejs but I have a lot of trouble and everything I could find on the net does not work.
I started up with vuejs.
Then I install the components to make sass. Until then, everything is ok. I could write my project. It is ugly but it turns like a charm.
Foundation installation therefore:

```

yarn add foundation-sites

yarn add --dev jquery what-input

```

I copy the node_modules/foundation-sites/scss/settings/_settings.scss file to the same location as the App.View file.

Finally, I modify my App.View in the part as follows:

```

<style lang="scss"> @import "_settings.scss"; @import "~foundation-sites/scss/foundation.scss"; @include foundation-button; #app { font-family: &apos;Avenir&apos;, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

```

Compilation with

```

yarn start

```

and there, error that I can not solve:

```

ERROR Failed to compile with 1 errors 12:59:20 error in ./src/App.vue Module build failed: @import 'util/util'; ^ File to import not found or unreadable: util/util. in /home/julien/Programmation/Golang/gwmpd/gwmpd_front/Gwmpd/src/_settings.scss (line 63, column 1) @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-359 13:3-17:5 14:22-367 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

```

Does somebody have an idea ?
I thank you in advance

cordially
JF

foundation vuejs

I try to integrate foundation with vuejs but I have a lot of trouble and everything I could find on the net does not work.
I started up with vuejs.
Then I install the components to make sass. Until then, everything is ok. I could write my project. It is ugly but it turns like a charm.
Foundation installation therefore:

```

yarn add foundation-sites

yarn add --dev jquery what-input

```

I copy the node_modules/foundation-sites/scss/settings/_settings.scss file to the same location as the App.View file.

Finally, I modify my App.View in the part as follows:

```

<style lang="scss"> @import "_settings.scss"; @import "~foundation-sites/scss/foundation.scss"; @include foundation-button; #app { font-family: &apos;Avenir&apos;, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

```

Compilation with

```

yarn start

```

and there, error that I can not solve:

```

ERROR Failed to compile with 1 errors 12:59:20 error in ./src/App.vue Module build failed: @import 'util/util'; ^ File to import not found or unreadable: util/util. in /home/julien/Programmation/Golang/gwmpd/gwmpd_front/Gwmpd/src/_settings.scss (line 63, column 1) @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-359 13:3-17:5 14:22-367 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

```

Does somebody have an idea ?
I thank you in advance

cordially
JF

Christian van der Leeden 11 months ago

I had the same problem. The problem is that webpack will find the node module "util" first and will try to load the util.js javascript file from this node module instead of loading the util.scss file from foundation. 

I resolved it by replacing

@import 'util/util' in settings.scss

with the contents of _util.scss (which was just another bunch of imports)

That worked then

Christian

 

Christian van der Leeden 11 months ago

Just edit your _settings.scss and replace the line

@import 'util/util';

 

with

@import '~foundation-sites/scss/util/math';

@import '~foundation-sites/scss/util/unit';
@import '~foundation-sites/scss/util/value';
@import '~foundation-sites/scss/util/direction';
@import '~foundation-sites/scss/util/color';
@import '~foundation-sites/scss/util/selector';
@import '~foundation-sites/scss/util/flex';
@import '~foundation-sites/scss/util/breakpoint';
@import '~foundation-sites/scss/util/mixins';
@import '~foundation-sites/scss/util/typography';

 

 

Frank LANG 8 months ago

Also: Foundation's ZURB stack including Twig (Twig.js) template engine and Vue.js progressive JS framework

https://github.com/franklang/foundation-zurb-template