将 SASS 个变量导入 Vue 组件

Question

我正在使用 Vue、Typescript、Webpack 和 Bulma 构建网页。我让一切正常工作和构建，但我注意到我的一些捆绑包很大（在某些情况下超过 2mb）。经过大量的混淆后，我发现这是因为我将包含 Bulma、Bulma Fluent 和 Material 设计图标的主要 SCCS 文件导入到我的组件中，以便我可以使用变量、混入和扩展一些类。据我了解，@import 只是从导入中复制所有内容，这可以解释我的大量捆绑包。

我的工作代码的近似值：

main.scss

/*Color customizations*/

@import "bulma-fluent/bulma.sass";
@import "buefy/src/scss/buefy";
@import "@mdi/font/scss/materialdesignicons";

/*Some custom classes*/

MyComponent.vue

/*Template and Script here*/
<style scoped lang="scss">
    @import "./main.scss";

    .floating {
        @extend .m-1;
        position: fixed;
        bottom: 0;
        right: 0;
    }

    @include mobile {
        .floating {
            max-width: unset;
            left: 0;
        }
    }
</style>

我希望能够从我的 main.scss 中引用 classes/variables/mixins，而不会使我的模块大小膨胀。我考虑过创建一个单独的 variables.sass 文件，但我无法让它工作，而且它没有解决扩展样式的问题。我看到了 this 个问题，但我没有使用 Nuxt。

我怎样才能让它工作？

P.S。在 Webpack/Vue/SASS/SCSS 方面，我有点菜鸟，所以如果我在这里只是愚蠢，我深表歉意。

编辑

最后我将变量拆分到它们自己的文件中并全局导入。它没有解决扩展样式的用例，但我认为这是一个失败的原因。我的代码如下：

Variables.scss

/*Customization here*/
@import "bulma/sass/utilities/functions.sass";

@import "bulma-fluent/src/sass/color/_all.sass";

@import "bulma/sass/utilities/initial-variables.sass";
@import "bulma/sass/utilities/derived-variables.sass";
@import "bulma/sass/utilities/mixins.sass";

Main.scss

@import "./Variables.scss";

@import "bulma-fluent/bulma.sass";
@import "buefy/src/scss/buefy";
@import "@mdi/font/scss/materialdesignicons";

/*Some custom classes*/

webpack.js

/*Other irrelevant configurations*/
{
    test: /\.s[ac]ss$/,
    use: [
        "vue-style-loader",
        "css-loader",
        {
            loader: "sass-loader",
            options: {
                additionalData: `
                @import "./Variables.scss";
                `
            }
        }
    ]
},

MyComponent.vue

/*Template and Script here*/
<style scoped lang="scss">
    .floating {
        margin: $size-1;
        position: fixed;
        bottom: 0;
        right: 0;
    }

    @include mobile {
        .floating {
            max-width: unset;
            left: 0;
        }
    }
</style>

Answer 1

我使用相同的堆栈。我有包含变量和 bulma mixins 的 variables.scss 文件，并且 variables.scss 文件仅在 main.scss 中导入。要在不使用 style 部分中的 @import 的情况下使所有组件中的所有变量和 mixins 可用，您应该将 loaderOptions 部分添加到 vue.config.js 文件中。这是我的 vue.config.js 文件：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "~@/assets/scss/_variables.scss";'
      }
    }
  }
}

将 SASS 个变量导入 Vue 组件

Importing SASS variables into Vue component

sass

webpack

vue.js

bulma