在不增加有效负载大小的情况下覆盖vue组件中的bulma变量 - Nuxt

Posted 2021-05-04

我在我的资源文件夹中有一个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 MB。我怎么才能只导入一次“〜bulma”？我尝试创建单独的文件，一个用于导入bulma后的变量，另一个用于导入bulma后的变量，但是这不起作用，因为你必须在第二个文件中导入bulma，否则你无法引用这些变量。

答案

这听起来就像一个插件的典型用例。我做的几乎一样，但是用vuetify而不是bulma。如果你只想要包含一个css文件globaly，你需要做的就是在nuxt.config.js文件的属性css中添加它。

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

你可能需要一个scss的加载器。如果您需要先配置您的bulma，可以考虑创建一个插件。在插件文件夹中创建一个文件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 context

在此之后，您需要将其作为插件包含在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希望这会有所帮助。 :)