Vuetify how to override sass variable for pagination component

Question

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.

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.

This is my webpack.config.js

//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';"
            },
          },
        ],
      },
    ],
  },
}

Following is the variables.scss inside src/scss directory, I use it to override the font-family and stuff.

 // src/scss/variables.scss
@import url("https://fonts.googleapis.com/css?family=Hind+Siliguri:400,500,600,700&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";

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.

Jeffri Andriyanto Jeffri Andriyanto · Accepted Answer · 2020-06-10T07:14:06

.v-pagination__item {
    height: 25px;
    min-width: 25px;
    margin: 0px !important;
    padding: 0px !important;
    font-size: 14px;
}

try use this class, and for nav

.v-pagination__navigation

it work for me

Vuetify how to override sass variable for pagination component

2 Answers