Npm 配置基础6和VUE CLI

我正在开始我的第一个真正的大型Vue项目。我有一些遗留基金会风格，我想包括在内。在非CLI创建的项目中，我将使用GULP编译SASS文件

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

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

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

我应该将custom_settings.scss文件放在哪里，以便控制设置 如果我试图将该文件包含在main.js中，整个过程都会失败

我是VUE CLI新手，但使用VUE和基金会有一段时间了。在新的敬畏中迷失了方向

---

有什么建议吗？

< P>我不太熟悉基础6，所以我不知道以前你是怎么添加的。但我是如何让它顺利运行的：

我假设您已安装：

使用CLI的Vue。基于网页包的项目

通过NPM建立基金会<代码>npm安装--保存基础站点

如果有偏差，请告诉我

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

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

下一步：将旧的

\u设置.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>

@导入“_settings.scss”；
@导入“~foundation sites/scss/foundation.scss”；
@包括基础按钮；
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

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

。我们告诉Vue这是一个SCSS文件，应该由SCSS解析

@import“\u settings.scss”。我们将导入您的旧设置文件。大多数设置只是覆盖变量

@import“~foundation sites/scss/foundation.scss”我们从“代码> NoDEi模块< /COD>目录导入基础。看它前面的瓷砖。这会告诉Vue查找
节点\u模块
目录，然后跟踪其中的文件

@包含基础按钮我们激活按钮。因为默认情况下，基础6没有激活组件以节省空间。

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

---

希望这有助于

< P>我不完全熟悉基础6，所以我不知道以前你是如何添加的。但我是如何让它顺利运行的：

我假设您已安装：

使用CLI的Vue。基于网页包的项目

通过NPM建立基金会<代码>npm安装--保存基础站点

如果有偏差，请告诉我

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

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

下一步：将旧的

\u设置.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>

@导入“_settings.scss”；
@导入“~foundation sites/scss/foundation.scss”；
@包括基础按钮；
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

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

。我们告诉Vue这是一个SCSS文件，应该由SCSS解析

@import“\u settings.scss”。我们将导入您的旧设置文件。大多数设置只是覆盖变量

@import“~foundation sites/scss/foundation.scss”我们从“代码> NoDEi模块< /COD>目录导入基础。看它前面的瓷砖。这会告诉Vue查找
节点\u模块
目录，然后跟踪其中的文件

@包含基础按钮我们激活按钮。因为默认情况下，基础6没有激活组件以节省空间。

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

希望这有帮助