配置 Foundation 6 和 Vue-CLI

Posted 2023-02-22

【中文标题】配置 Foundation 6 和 Vue-CLI

【英文标题】：Configuring Foundation 6 and Vue-CLI

【发布时间】：2018-11-23 11:21:32

【问题描述】：

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

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

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

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

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

有什么建议吗？

【参考方案1】：

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

我假设你已经安装了：

使用 CLI 进行 Vue。基于 Webpack 的项目 通过 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>

我们做了什么？让我们逐行进行

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

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

希望对你有帮助