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

【问题标题】：Override bulma variables in vue components without increasing payload size - Nuxt在不增加有效负载大小的情况下覆盖 vue 组件中的 bulma 变量 - Nuxt
【发布时间】：2018-06-08 16:59: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，否则您无法引用这些变量。

【问题讨论】：

标签： sass vuejs2 nuxt.js bulma

【解决方案1】：

现在您可以避免使用此包在每个组件中导入 main.scss 文件：Nuxt Style Resources

第一步：确保您已安装 sass-loader 和 node-sass 作为开发依赖项或安装它们：yarn add sass-loader node-sass --save-dev或npm i sass-loader node-sass --save-dev

第二步：将 Nuxt 样式资源安装为依赖项：yarn add @nuxtjs/style-resources或npm i @nuxtjs/style-resources

第三步：将其添加到 nuxt.config.js

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

有关更多信息，请查看上面链接中的包文档。

【讨论】：

【解决方案2】：

这听起来像是插件的典型用例。我做了几乎相同的事情，但使用 vuetify 而不是 bulma。如果您只想全局包含一个 css 文件，您只需将其添加到 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 希望这会有所帮助。 :)

【讨论】：