在不增加负载大小的情况下覆盖 vue 组件中的 bulma 变量 - Nuxt [英] Override bulma variables in vue components without increasing payload size - Nuxt

问题描述

我的资产文件夹中有一个 main.scss 文件，我用它来覆盖 bulma 变量.我通过 nuxt-config 文件使这个文件全局可用.

I have a main.scss file in my assets folder which I use to override bulma variables. I make this file available globally via the nuxt-config file.

@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 组件中使用这些变量时，这会大大增加站点的负载大小.

However, I also need to override variables after the @import '~bulma'; statement. The problem here is that this vastly increases the payload size of the site when using theses variables in vue components.

对于我需要像这样使用这些变量的每个组件:

For every component where I need to use these variables like this:

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

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

</style>

添加了大约 1 MB.我怎样才能只导入 '~bulma' 一次?我尝试创建单独的文件，一个用于导入 bulma 后的变量，另一个用于导入 bulma 后的变量，但是这不起作用，因为无论如何您都必须在第二个文件中导入 bulma，否则您将无法引用这些变量.

About 1 MB is added. How can I only import '~bulma' once? I tried creating separate files, one for variables after importing bulma, and one for variables after importing bulma, however this doesn't work because you have to import bulma anyway in the second file because otherwise you couldn't reference these variables.

推荐答案

现在你可以避免在每个组件中使用这个包导入你的 main.scss 文件:Nuxt 样式资源

Nowadays you can avoid importing your main.scss file in every componente with this package: Nuxt Style Resources

第一步:确保将 sass-loader 和 node-sass 安装为开发依赖项或安装它们:yarn add sass-loader node-sass --save-dev 或 npm我 sass-loader node-sass --save-dev

1st step: make sure you have sass-loader and node-sass installed as dev dependencies or install them: yarn add sass-loader node-sass --save-devor npm i sass-loader node-sass --save-dev

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

2nd step: install Nuxt Style Resources as a dependency: yarn add @nuxtjs/style-resourcesor npm i @nuxtjs/style-resources

第三步:添加到nuxt.config.js

3rd step: add it to nuxt.config.js

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

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

For more info check the package docs on the link above.

这篇关于在不增加负载大小的情况下覆盖 vue 组件中的 bulma 变量 - Nuxt的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！