Vuetify 中文网

简体中文

English

简体中文

English

主题

SSASS 变量 ​

Vuetify 使用 SASS/SCSS 来设计框架所有方面的样式和外观。

INFO

推荐在熟悉了 摇树 Treeshaking 过程之后再继续阅读本章节。

安装 ​

Vuetify 开箱即用，不需要安装任何额外的编译器，但它支持高级用例，比如修改框架的底层变量。Vite 提供了对 sass、less 和 stylus 文件的内置支持，而无需为它们安装特定于 Vite 的插件;就是相应的预处理器本身。

要开始修改 Vuetify 的内部变量，请安装 sass 预处理程序:

bash
  yarn add -D sass
bash
  npm install -D sass-loader sass
bash
  pnpm install -D sass-loader sass
bash
  bun add -D sass-loader sass

有关 css 预处理器的更多详情，请参阅官方网页: https://vitejs.dev/guide/features.html#css-pre-processors or official vue-cli-page at: https://cli.vuejs.org/guide/css.html#pre-processors

基本用法 ​

在你的 src/styles 目录下创建一个main.scss 文件，并更新vuetify.js文件中的样式导入:

scss
@use "vuetify" with (; // variables go here);
diff
- import 'vuetify/styles'
+ import '@/styles/main.scss'

在样式文件中，导入 Vuetify 样式并指定要覆盖的变量，就是这样。

WARNING

'vuetify/styles'不应该在 sass 文件中使用，因为它解析为预编译的 CSS (vitejs/vite#7809) ）. 'vuetify'和'vuetify/settings'是有效和安全的使用

组件特定变量 ​

自定义组件中使用的变量有点复杂，需要使用特殊的构建插件。

遵循treeshaking的插件设置指南 然后添加styles.configFile到插件选项:

js
vuetify({
  styles: {
    configFile: "src/styles/settings.scss",
  },
});
scss
@use "vuetify/settings" with (
  $button-height: 40px
);

configFile将相对于项目根解析，并在每个 vuetify 的样式表之前加载。如果你正在使用上面提到的基本技巧，请确保:

  • 删除它并切换回导入 import 'vuetify/styles', 或者
  • 添加@use './settings'在main.scss中@use 'vuetify'之前然后删除@use 'vuetify'中的with块。

你可以保持使用main.scss用于其他样式重写，但不要同时使用@use 'vuetify'和import 'vuetify/styles'，否则你会得到重复的样式。

变量 API ​

有许多 SASS/SCSS 变量可以在整个 Vuetify 框架中定制。你可以使用下面的工具浏览所有的变量:

可用的 SASS 变量位于每个组件的 API 页面上。

image

模板中的用法 ​

你可以访问全局global 和 Vue 模板中的每个组件变量，只需导入 settings 文件:

html
<style lang="scss">
  @use "./settings";

  .my-button {
    height: settings.$button-height;
  }
</style>

请记住，要从 Vuetify 获取设置，必须从本地样式表中转发它的变量。在下面的示例中，我们修改settings.scss 成为forward而非use:

diff
- @use 'vuetify/settings' with (
+ @forward 'vuetify/settings' with (

禁用实用类 ​

实用程序类是 Vuetify 的一个强大特性，但是对于某些项目来说，它们也是不必要的。每个实用程序类都是用这里here定义的一组选项生成的 。通过将相应的变量设置为false来禁用单个类:

scss
@forward "vuetify/settings" with (
  $utilities: (
    "align-content": false,
    "align-items": false,
    "align-self": false,
    "border-bottom": false,
    "border-end": false,
    "border-opacity": false,
    "border-start": false,
    "border-style": false,
    "border-top": false,
    "border": false,
    "display": false,
    "flex-direction": false,
    "flex-grow": false,
    "flex-shrink": false,
    "flex-wrap": false,
    "flex": false,
    "float-ltr": false,
    "float-rtl": false,
    "float": false,
    "font-italic": false,
    "font-weight": false,
    "justify-content": false,
    "margin-bottom": false,
    "margin-end": false,
    "margin-left": false,
    "margin-right": false,
    "margin-start": false,
    "margin-top": false,
    "margin-x": false,
    "margin-y": false,
    "margin": false,
    "negative-margin-bottom": false,
    "negative-margin-end": false,
    "negative-margin-left": false,
    "negative-margin-right": false,
    "negative-margin-start": false,
    "negative-margin-top": false,
    "negative-margin-x": false,
    "negative-margin-y": false,
    "negative-margin": false,
    "order": false,
    "overflow-wrap": false,
    "overflow-x": false,
    "overflow-y": false,
    "overflow": false,
    "padding-bottom": false,
    "padding-end": false,
    "padding-left": false,
    "padding-right": false,
    "padding-start": false,
    "padding-top": false,
    "padding-x": false,
    "padding-y": false,
    "padding": false,
    "rounded-bottom-end": false,
    "rounded-bottom-start": false,
    "rounded-bottom": false,
    "rounded-end": false,
    "rounded-start": false,
    "rounded-top-end": false,
    "rounded-top-start": false,
    "rounded-top": false,
    "rounded": false,
    "text-align": false,
    "text-decoration": false,
    "text-mono": false,
    "text-opacity": false,
    "text-overflow": false,
    "text-transform": false,
    "typography": false,
    "white-space": false,
  )
);

要禁用所有实用程序类，将整个$utilities变量设置为false:

scss
@forward "vuetify/settings" with (
  $utilities: false
);

禁用颜色包 ​

颜色包可以方便地快速将颜色应用到组件上，但在生产中大多不使用。要禁用它们，将$color-pack变量设置为false:

scss
@forward "vuetify/settings" with (
  $color-pack: false
);

Enabling CSS cascade layers ​

TIP

此特性在 v3.6.0 (Nebula)版本引入。

Cascade layers 是一个现代的 CSS 特性，它使编写自定义样式变得更容易，而不必处理特定的问题和!important。这将默认包含在 Vuetify 4 中，但现在可以选择使用:

scss
@forward "vuetify/settings" with (
  $layers: true
);

在启用图层后，样式表的导入顺序变得更加重要，import 'vuetify/styles'或包含 @use 'vuetify'的文件必须在任何组件之前加载，否则 CSS 重置将优先于组件样式并破坏一切。如果你有单独的插件文件，确保在App.vue之前导入 vuetify 的。

如果你自己不使用@layer，你自己的样式将总是覆盖 vuetify的，或者你可以在 vuetify 之前加载的样式表中指定自定义图层的顺序

css
@layer base, vuetify, overrides;

* 图层倒置 !important, 所以任何试图覆盖一个重要的 vuetify style 也必须在一个层。

注意 ​

使用 sass 变量时，需要注意几个地方。

重复的 CSS ​

将实际样式或将常规样式表导入设置文件将导致它们在导入文件的任何地方被复制。只把变量、mixins 和函数放在设置文件中，样式应该放在主样式表中或以其他方式加载。

构建性能 ​

Vuetify 默认加载预编译的 CSS，启用变量自定义将切换到基本 SASS 文件，而必须随着项目重新编译。如果您使用了多个验证组件，这可能会影响性能，并且还会迫使您使用与我们相同的 SASS 编译器版本。

符号链接 ​

PNPM 和 Yarn 2+创建指向库文件的符号链接，而不是将它们复制到 node_modules 中，sass 似乎不喜欢这样，有时不应用配置。

含 api: 'modern'的 sass-loader ​

您可能需要编写一个自定义导入器插件来加载设置文件。