Question

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

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

我已经通过NPM安装了所有SASS库，但我无法弄清楚在哪里执行以下操作：

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

我是vue-cli的新手，但已经使用过Vue和Foundation一段时间了。在新的自尊心中迷失方向。

有什么建议吗？

Answer 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

下一步：复制由Vue CLI创建的App.vue 文件旁边的旧_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>

我们做了什么？让我们一行一行

<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默认没有激活组件以节省空间。

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

希望这有帮助

配置Foundation 6和Vue-CLI

1 个答案: