title: Using vuetify custom sass variables in a vue app using rails/webpacker
body: <p>I'm working on a Vue app with Rails backend. I'm using Vuetify and I want to customize the SCSS variables. Sadly, I can't use Vue-CLI because we're bundling everything with webpacker, the rails implementation for webpack. Thus, I try to implement it with the base webpack configuration option.</p>
  
  <p>I haven't been able to do this directly, as webpacker has their own css/sass/scss loader configurations. But, I <em>can</em> hook into the existing loaders and modify the options in a function that sets them later:</p>
  
  <pre><code>// config/webpack/environment.js
  
  const updateStyleLoaders = (arr) =&gt; {
    arr.forEach((item) =&gt; {
      const loader = environment.loaders.get(item);
  
      // Use vue-style-loader instead of default to parse Vue SFCs
      const styleConfig = loader.use.find((el) =&gt; el.loader === 'style-loader');
      if (styleConfig !== undefined) {
        styleConfig.loader = 'vue-style-loader';
      }
  
      // VUETIFY: Use Dart-Sass and Fibers for Sass loaders
      const sassConfig = loader.use.find((el) =&gt; el.loader === 'sass-loader');
      if (sassConfig !== undefined) {
        const opts = sassConfig.options;
  
        opts.implementation = require('sass'); // Use dart-sass instead of node-sass
        opts.fiber = require('fibers'); // improves compilation speed
        opts.data = "@import '@/assets/sass/variables.scss';"; // Import custom variables
      }
    });
  };
  
  // Call fuction for all css-related loaders
  updateStyleLoaders(['sass', 'css', 'moduleCss', 'moduleSass']);
  
  
  // @/assets/sass/variables.scss
  
  $body-font-family: "Comic Sans MS", "Comic Sans", cursive; // just wanna have fun
  $border-radius-root: 20px;
  
  </code></pre>
  
  <p>Now here's the problem:</p>
  
  <p>The sass-loader rule matches both 'sass' and 'scss'. In <a href="https://vuetifyjs.com/en/customization/sass-variables/" rel="nofollow noreferrer">vuetify's example</a> the matching for sass and scss is done seperately. When I add the semicolon, I get this error during compilation:</p>
  
  <pre><code>./node_modules/vuetify/src/components/VAlert/VAlert.sass
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  
  // Imports
                                       ^
        Semicolons aren't allowed in the indented syntax.
    ╷
  1 │ @import '@/assets/sass/variables.scss';
    │                                       ^
    ╵
    stdin 1:39  root stylesheet
  </code></pre>
  
  <p>This tells me the line is in fact correctly added by sass-loader to the vuetify components that are added in. But, <strong>when I remove the semicolon</strong> from the import statement to support sass' indented syntax, <strong>I see no style changes</strong>.</p>
  
  <p>How would I customize my vuetify components in this scenario? Webpacker uses sass-loader v7.3.1.</p>