将 SASS 变量导入 Vue 组件

Question

我正在使用 Vue、Typescript、Webpack 和 Bulma 构建网页。我让一切正常工作和构建，但我注意到我的一些包很大（在某些情况下超过 2mb）。经过一番困惑后，我发现这是因为我将包含 Bulma、Bulma Fluent 和 Material Design Icons 的主 SCCS 文件导入到我的组件中，以便我可以使用变量、mixin 和扩展一些类。据我了解@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 中引用类/变量/mixins，而不会使我的模块大小膨胀。我想过创建一个单独的variables.sass 文件，但我无法让它工作，而且它不能解决扩展样式的问题。我看到了this 的问题，但我没有使用 Nuxt。

我怎样才能让它工作？

附：当谈到 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 中导入。 要使所有变量和 mixin 在所有组件中可用，而不在 style 部分中使用 @import，您应该将 loaderOptions 部分添加到 vue.config.js 文件中。这是我的vue.config.js 文件：

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