Question

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

Answer 1

将CSS资源添加到nuxt.config.js文件中，如下所示：

  export default {
      css: [ 
     '@/assets/css/bootstrap.min.css',

     ]
}

或尝试以下操作：

link: [     
{rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'}
]

Answer 2

尝试将基础站点导入到您的项目中（它可能会要求您还安装其他内容，例如what-input等）：

npm install foundation-sites

然后，如果您使用的是nuxt-cli项目，请在/assets目录下的/scss目录中包含其文档中的app.scss文件，您可以在其中找到{ {3}}。

将@import 'foundation';替换为@import '~foundation-sites/scss/foundation';，这是一个Nuxt怪癖。在其上方添加@import 'global';，然后将_global.scss中的/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，您将告诉脚本加载到身体中而不是头部中，即使该脚本在head: {}中被调用。您还可以在module.exports中逐页调用此函数，以避免将其加载到不需要的位置。

将zurb网站基础导入nuxt项目的简单方法？

2 个答案: