时间戳

首页 > 解决方案 > 将站点的zurb基础导入nuxt项目的简便方法？

vue.js - 将站点的zurb基础导入nuxt项目的简便方法？

问题描述

如何将站点的 zurb 基础（最终引导程序）导入到我的 nuxtjs 项目中。

标签： vue.jszurb-foundationnuxt.js

解决方案

尝试将基础站点导入您的项目（它可能会要求您还安装一些其他的东西，例如输入内容等）：

npm install foundation-sites

然后，如果您使用的是 nuxt-cli 项目，请在您的/assets目录下包含一个/scss目录，其中包含app.scss他们文档中的文件，您可以在他们的 Starter Project 部分下找到该文件。

替换@import 'foundation';为@import '~foundation-sites/scss/foundation';这是 Nuxt 的一个怪癖。在上面添加一个@import 'global';，然后将_global.scssfrom复制/node_modules/foundation-sites/scss/到与您的文件相同的目录中app.scss。

接下来，您将要跳到nuxt.config.js根目录中的文件并将其添加到您的之后head: {},：

css: [
{ lang: 'scss', src: '@/assets/scss/app.scss' },

]

在里面build: {}，你会想告诉 webpack 加载这些东西，所以包括如下内容：

extend (config, { isDev, isClient }) {
  for (const rule of config.module.rules) {
    if (rule.use) {
      for (const use of rule.use) {
        if (use.loader === 'sass-loader') {
          use.options = use.options || {};
          use.options.includePaths = ['~/node_modules/foundation-sites/scss', '~/node_modules/motion-ui/src'];
        }
      }
    }
  }

您应该可以从那里立即跳入您的页面和组件文件并立即开始使用它。如果您对 jquery 有任何问题，我实际上head: {}在我的nuxt.config.js文件末尾加载了我的，例如：

script: [
  {
    src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js',
    integrity: 'sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=',
    crossorigin: 'anonymous',
    body: true
  }
]

通过body: true在其中添加，您是在告诉脚本加载到正文而不是头部，即使它被称为 within head: {}。您还可以在您的页面中逐页调用module.exports它，以避免在不需要的地方加载它。

推荐阅读