Переопределить переменные bulma в компонентах vue без увеличения размера полезной нагрузки - Nuxt - PullRequest
Новая
       34

Переопределить переменные bulma в компонентах vue без увеличения размера полезной нагрузки - Nuxt

0 голосов
/ 08 июня 2018

У меня есть файл main.scss в моей папке ресурсов, который я использую для переопределения переменных bulma.Я делаю этот файл доступным глобально через файл nuxt-config. 

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';

//override some variables
$primary: #FF5B5B;
$light: #f1f1f1;

@import '~bulma';

$section-height: calc(100vh - #{$navbar-height});

Однако мне также необходимо переопределить переменные после оператора @import '~bulma';.Проблема здесь в том, что это значительно увеличивает размер полезной нагрузки сайта при использовании этих переменных в компонентах vue.

Для каждого компонента, где мне нужно использовать эти переменные, например: 

<style scoped lang="scss">
@import "~/assets/css/main.scss";

.custom-height {
  height: $section-height;
}

</style>

Около 1 МБ добавлено.Как я могу импортировать '~ bulma' только один раз?Я попытался создать отдельные файлы, один для переменных после импорта bulma, а другой для переменных после импорта bulma, однако это не сработало, поскольку вам все равно придется импортировать bulma во второй файл, поскольку в противном случае вы не могли бы ссылаться на эти переменные.

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

В настоящее время вы можете избежать импорта файла main.scss в каждый компонент с помощью этого пакета: Ресурсы стиля Nuxt

1-й шаг: убедитесь, что у вас установлены sass-loader и node-sass.как зависимости dev или установить их: yarn add sass-loader node-sass --save-dev или npm i sass-loader node-sass --save-dev

2-й шаг: установить ресурсы стиля Nuxt в качестве зависимости: yarn add @nuxtjs/style-resources или npm i @nuxtjs/style-resources

3-й шаг: добавить его вnuxt.config.js 

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/*.scss',
      './assets/abstracts/_mixins.scss' // use underscore "_" & also file extension ".scss"
      ]
  }
}

Для получения дополнительной информации проверьте документы пакета по ссылке выше.

0 голосов
/ 14 июня 2018

это похоже на типичный вариант использования плагина.Я сделал почти то же самое, но с vuetify вместо bulma.Если вы хотите включить глобальный файл CSS, все, что вам нужно сделать, это добавить его в свойство css вашего файла nuxt.config.js. 

module.exports = {
  ...
  css: ['~/assets/css/main.scss'],
  ...
}

Возможно, вам понадобится загрузчик для scss.Если вам нужно сначала настроить свою бульму, вы можете подумать о создании плагина.В папке плагина создайте файл bulma.js, затем поместите все ваши файлы конфигурации в этот файл. 

import Bulma from 'bulma'
import Vue from 'vue'

Vue.use(Bulma, { your config goes here })

Если вам нужен доступ к переменным из вашего приложения, напишите в тот же файл: 

export default ({ app, store ... }) => {
  // now you can use all the context
}

Все доступные атрибуты контекста можно найти здесь: Контекст Nuxtjs

После этого вам необходимо включить его в качестве плагина в nuxt.config.js. 

module.exports = {
  ...
  plugins: ['~/plugins/bulma']
  build: {
    vendor: ['bulma'] // from node_modules imported only once for the whole app
  }
  ...
}

Все, что вы кладете в build.vendor, загружается только ONCE . Nuxt build vendor Надеюсь, это поможет.:)

...