title: Importing SASS variables into Vue component
body: <p>I'm working on building a webpage using Vue, Typescript, Webpack, and Bulma. I got everything working and building correctly but I noticed that some of my bundles were massive (over 2mb in some cases). After a lot of confusion I figured out it was because I was importing my main SCCS file that included Bulma, Bulma Fluent, and Material Design Icons into my components so that I could use the variables, mixins, and extend some of the classes. From what I understand <code>@import</code> simply copies everything from the import, which would explain my massive bundles.</p>
  <p>A close approximation of my working code:</p>
  <p><em>main.scss</em></p>
  <pre><code>/*Color customizations*/
  
  @import &quot;bulma-fluent/bulma.sass&quot;;
  @import &quot;buefy/src/scss/buefy&quot;;
  @import &quot;@mdi/font/scss/materialdesignicons&quot;;
  
  /*Some custom classes*/
  </code></pre>
  <p><em>MyComponent.vue</em></p>
  <pre><code>/*Template and Script here*/
  &lt;style scoped lang=&quot;scss&quot;&gt;
      @import &quot;./main.scss&quot;;
  
      .floating {
          @extend .m-1;
          position: fixed;
          bottom: 0;
          right: 0;
      }
  
      @include mobile {
          .floating {
              max-width: unset;
              left: 0;
          }
      }
  &lt;/style&gt;
  </code></pre>
  <p>I want to be able to reference classes/variables/mixins from my <code>main.scss</code> without it ballooning the size of my modules. I thought about creating a separate <code>variables.sass</code> file but I couldn't get that to work plus it doesn't fix the issue of extending styles. I saw <a href="https://stackoverflow.com/questions/50765343/override-bulma-variables-in-vue-components-without-increasing-payload-size-nux">this</a> question but I'm not using Nuxt.</p>
  <p>How can I get this working?</p>
  <p>P.S. I'm a bit of a noob when it comes to Webpack/Vue/SASS/SCSS so I apologize if I'm just being dumb here.</p>
  <p><strong>Edit</strong></p>
  <p>In the end I split out the variables to their own file and imported those globally. It doesn't solve the use case of extending styles but I think that's a lost cause. My code is below:</p>
  <p><em>Variables.scss</em></p>
  <pre><code>/*Customization here*/
  @import &quot;bulma/sass/utilities/functions.sass&quot;;
  
  @import &quot;bulma-fluent/src/sass/color/_all.sass&quot;;
  
  @import &quot;bulma/sass/utilities/initial-variables.sass&quot;;
  @import &quot;bulma/sass/utilities/derived-variables.sass&quot;;
  @import &quot;bulma/sass/utilities/mixins.sass&quot;;
  </code></pre>
  <p><em>Main.scss</em></p>
  <pre><code>@import &quot;./Variables.scss&quot;;
  
  @import &quot;bulma-fluent/bulma.sass&quot;;
  @import &quot;buefy/src/scss/buefy&quot;;
  @import &quot;@mdi/font/scss/materialdesignicons&quot;;
  
  /*Some custom classes*/
  </code></pre>
  <p><em>webpack.js</em></p>
  <pre><code>/*Other irrelevant configurations*/
  {
      test: /\.s[ac]ss$/,
      use: [
          &quot;vue-style-loader&quot;,
          &quot;css-loader&quot;,
          {
              loader: &quot;sass-loader&quot;,
              options: {
                  additionalData: `
                  @import &quot;./Variables.scss&quot;;
                  `
              }
          }
      ]
  },
  </code></pre>
  <p><em>MyComponent.vue</em></p>
  <pre><code>/*Template and Script here*/
  &lt;style scoped lang=&quot;scss&quot;&gt;
      .floating {
          margin: $size-1;
          position: fixed;
          bottom: 0;
          right: 0;
      }
  
      @include mobile {
          .floating {
              max-width: unset;
              left: 0;
          }
      }
  &lt;/style&gt;
  </code></pre>