title: Vuetify how to override sass variable for pagination component
body: <p>I am having some issue while modifying the existing sass variables inside my vue application.
  I have gone through  a few SO questions where there are good amount of information on overriding the existing sass variables but nothing seems be working for me. I am pretty sure I am doing some thing wrong.</p>
  
  <p>I have implemented a custom pagination control which works fine but I want to override the sass variables for it so that the size of pagination control button would be little smaller than the default button size.</p>
  
  <p><a href="https://i.stack.imgur.com/pFWCY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pFWCY.png" alt="enter image description here"></a></p>
  
  <p>This is my webpack.config.js</p>
  
  <pre><code>//webapack.config.js
  module.exports = {
    module: {
      rules: [
        // SASS has different line endings than SCSS
        // and cannot use semicolons in the markup
        {
          test: /\.sass$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              // Requires sass-loader@^7.0.0
              options: {
                // This is the path to your variables
                data: "@import '@/scss/variables.scss'"
              },
              // Requires sass-loader@^8.0.0
              options: {
                // This is the path to your variables
                prependData: "@import '@/scss/variables.scss'"
              },
            },
          ],
        },
        // SCSS has different line endings than SASS
        // and needs a semicolon after the import.
        {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              // Requires sass-loader@^7.0.0
              options: {
                // This is the path to your variables
                data: "@import '@/scss/variables.scss';"
              },
              // Requires sass-loader@^8.0.0
              options: {
                // This is the path to your variables
                prependData: "@import '@/scss/variables.scss';"
              },
            },
          ],
        },
      ],
    },
  }
  </code></pre>
  
  <p>Following is the variables.scss inside src/scss directory, I use it to override the font-family and stuff.</p>
  
  <pre><code> // src/scss/variables.scss
  @import url("https://fonts.googleapis.com/css?family=Hind+Siliguri:400,500,600,700&amp;display=swap");
  $body-font-family: "Hind Siliguri", sans-serif !important;
  
  $typoOptions: display-4, display-3, display-2, display-1, headline, title,
    subtitle-1, subtitle-2, body-1, body-2, caption, overline;
  
  #app {
    font-family: $body-font-family, sans-serif !important;
  
    @each $typoOption in $typoOptions {
      .#{$typoOption} {
        font-family: $body-font-family, sans-serif !important;
      }
    }
  }
  // $pagination-item-font-size: 2px !important;
  // $pagination-item-height: 10px !important;
  // $pagination-item-margin: 1px !important;
  // $pagination-item-min-width: 10px !important;
  // $pagination-item-padding: 0 10px !important;
  // $pagination-more-height: x !important;
  
  // $pagination-navigation-height: 10px !important;
  // $pagination-navigation-width: 10px !important;
  
  @import "~vuetify/src/styles/styles.sass";
  
  </code></pre>
  
  <p>I want to override the sass variables given by vuetify but when I add them variables.scss (commented line on the above code), it doesn't work for some reason. Any help or pointer is much appreciated.</p>