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

Sass 在不增加有效负载大小的情况下覆盖vue组件中的bulma变量-Nuxt,sass,vuejs2,nuxt.js,bulma,Sass,Vuejs2,Nuxt.js,Bulma,我的资产文件夹中有一个main.scss文件,用于覆盖bulma变量。我通过nuxt配置文件使该文件全局可用 @import '~bulma/sass/utilities/initial-variables'; @import '~bulma/sass/utilities/functions'; //override some variables $primary: #FF5B5B; $light: #f1f1f1; @import '~bulma'; $section-height: c

我的资产文件夹中有一个main.scss文件,用于覆盖bulma变量。我通过nuxt配置文件使该文件全局可用

@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>

@导入“~/assets/css/main.scss”;
.定制高度{
高度:$截面高度;
}

增加了大约1MB。我怎么能只导入一次“~bulma”?我尝试创建单独的文件,一个用于导入bulma后的变量,一个用于导入bulma后的变量,但是这不起作用,因为您必须在第二个文件中导入bulma,否则您无法引用这些变量。

这听起来像是插件的典型用例。我也这么做了,但是用了vuetify而不是bulma。 如果您只想在全局范围内包含css文件,那么只需将其添加到nuxt.config.js文件的属性css中即可

module.exports = {
  ...
  css: ['~/assets/css/main.scss'],
  ...
}
您可能需要一个用于SCS的加载程序。 如果你需要先配置你的BUMA,你可以考虑创建一个插件。 在plugin文件夹中创建一个文件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
}
可以在此处找到所有可用的上下文属性:

在此之后,您需要将其作为插件包含在nuxt.config.js中

module.exports = {
  ...
  plugins: ['~/plugins/bulma']
  build: {
    vendor: ['bulma'] // from node_modules imported only once for the whole app
  }
  ...
}
您放入build.vendor中的所有内容只加载一次。
希望这会有所帮助。:)

现在,您可以避免使用此软件包在每个组件中导入main.scss文件:

第一步:确保已将sass加载器和节点sass作为开发依赖项安装,或安装它们:
添加sass加载器节点sass--保存开发
npm i sass加载器节点sass--保存开发

第二步:将Nuxt样式资源作为依赖项安装:
添加@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"
      ]
  }
}
有关更多信息,请查看上面链接上的包文档