配置 Foundation 6 和 Vue-CLI

Question

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

但现在我想将 _settings.scss 文件包含到我的应用程序中，然后按照我的意愿自定义设置。但是我该怎么做呢？

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

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

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

有什么建议？

Answer 1

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

我假设你已经安装：

1. 带有 CLI 的 Vue。基于 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 创建的App.vue 文件旁边。打开 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 默认没有激活任何组件以节省空间。

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

希望这可以帮助