配置Foundation 6和Vue-CLI

Question

我正在开始我的第一个非常大的Vue项目。 我想包含一些旧的Foundation样式。 在非CLI创建的项目中，我将使用GULP编译我的SASS文件。

但是现在我想将_settings.scss文件包含到我的App中，然后根据需要自定义设置。 但是我该怎么做呢？

我已经通过NPM安装了所有SASS库，但是我不知道在哪里可以执行以下操作：

我将自定义_settings.scss文件放在哪里，以便可以控制设置。如果尝试将文件包含在main.js中，整个过程就会崩溃。

我是vue-cli的新手，但是使用Vue和Foundation已有一段时间了。 在新的awesoness中有点迷路。

有什么建议么？

Answer 1

我对Foundation 6并不完全熟悉，所以我不知道您以前如何添加它。 但是，这是我设法使其顺利运行的方式：

我假设您已安装：

1. Vue与CLI。 一个基于Webpack的项目
2. 通过NPM建立。 npm install --save foundation-sites

如果出现这种情况，请告诉我。

第一步： 让我们教Vue.js如何解析SCSS ，因为您所有的文件都是SCSS。

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

下一步： 将旧的_settings.scss文件复制到 Vue CLI创建的_settings.scss文件旁边 。 打开App.vue文件，然后将样式部分更改为以下内容：

<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>

我们做了什么？ 一行一行地走

1. <style lang="scss"> 。 我们告诉Vue，这是一个SCSS文件，应该由SCSS解析
2. @import "_settings.scss"; 。 我们导入您的旧设置文件。 无论如何，这些设置中的大多数都只是覆盖变量。
3. @import "~foundation-sites/scss/foundation.scss"; 我们从node_modules目录导入基础。 看它前面的波浪号。 这告诉Vue查找node_modules目录，然后跟随其中的文件。
4. @include foundation-button; 我们激活按钮。 因为Foundation 6没有默认激活的组件以节省空间。

就是这样。 我创建了一个设置文件，将按钮背景更改为深红色，并得到了以下信息：

希望这可以帮助