Простой способ импортировать zurb Foundation для сайтов в nuxt проект? - PullRequest
Новая
       6

Простой способ импортировать zurb Foundation для сайтов в nuxt проект?

0 голосов
/ 01 января 2019

Как импортировать основу zurb для сайтов (в конечном итоге начальную загрузку) в мой проект nuxtjs.

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Попробуйте импортировать Foundation-сайты в ваш проект (он может попросить вас также установить пару других вещей, таких как what-input и т. Д.): 

npm install foundation-sites

Затем, если вы используете nuxt-cli проект, в вашем каталоге /assets, включает каталог /scss с файлом app.scss из их документации, который вы можете найти здесь, в разделе их начального проекта .

Замените @import 'foundation'; на @import '~foundation-sites/scss/foundation'; Это причудливая причуда.Добавьте @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, чтобы не загружать его там, где он вам не нужен.

0 голосов
/ 01 января 2019

добавьте ресурсы 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'}
]
...