验证如何覆盖分页组件的sass变量

Question

在修改vue应用程序中的现有sass变量时，我遇到了一些问题。我已经提出了一些问题，其中有大量关于覆盖现有sass变量的信息，但似乎没有什么对我有效。我很确定我做错了什么。

我已经实现了一个自定义分页控件，它工作得很好，但我想覆盖它的sass变量，以便分页控件按钮的大小略小于默认按钮的大小。

​

​

这是我的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';"
            },
          },
        ],
      },
    ],
  },
}

下面是src/scss目录中的variables.scss，我用它来覆盖font-family和其他内容。

 // 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";

我想覆盖vuetify给出的sass变量，但是当我添加它们variables.scss (上面代码中的注释行)时，由于某种原因，它不能工作。任何帮助或指针都是非常感谢的。

Answer 1

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

尝试使用这个类，对于nav

.v-pagination__navigation

它对我很有效

Answer 2

我遇到了一个类似的问题，总的可见页面不一致。一种解决方法是基于数据集大小创建逻辑，并更新列大小的反应属性。