在 SASS 中使用 Vuetify 类

Posted 2023-02-23

【中文标题】在 SASS 中使用 Vuetify 类

【英文标题】：Using Vuetify classes within SASS

【发布时间】：2020-01-21 15:02:38

【问题描述】：

我想在我自己的sass 文件中使用一些现有的 Vuetify 类，但我似乎不知道该怎么做。我有一个带有最新 Vue/Vuetify 的 Vue-CLI3 项目，并且有以下代码：

main.sass

@import '~vuetify/src/styles/styles.sass'

.myTest
  @extend .mr-1
  @extend .shrink

我还有vue.config.js 设置以正确引用sass/scss 文件：

export default 
  css: 
    loaderOptions: 
      sass: 
        data: `@import "path/to/main.sass"`
      ,
      scss: 
        data: `@import "path/to/main.scss";`
      ,
    
  

当我编译时，我得到The target selector was not found，它指向.mr-1 和.shrink。我做错了吗？

我的main.sass 文件中的所有其他 CSS 都按预期工作，所以我相信接线是正确的。

【参考方案1】：

似乎spacing helper classes（包括.mr-1）仅在导入vuetify/src/styles/main.sass而不是styles.sass时才被发现。 .shrink 类位于 vuetify/src/components/VGrid/_grid.sass。

所以你的main.sass 应该是这样的：

@import '~vuetify/src/styles/main.sass'
@import '~vuetify/src/components/VGrid/_grid.sass' // for .shrink

.myTest
  @extend .mr-1
  @extend .shrink

sass-loader配置

鉴于sass.data 配置，最初的问题可能是使用旧版本的sass-loader。如果使用版本 8 或更高版本，加载程序选项为sass.additionalData：

// vue.config.js
module.exports = 
  css: 
    loaderOptions: 
      sass: 
        // sass-loader >= 8
        additionalData: `@import "~@/path/to/main.sass"`

        // sass-loader < 8
        data: `@import "~@/path/to/main.sass"`
      
    
  ,

预置全局样式

使用上面的sass-loader 配置，在项目的根目录main.sass 中导入vuetify/src/styles/main.sass（如在原始问题中所做的那样）会导致错误。解决方法是将 Vuetify 的 main.sass 的内容复制到您自己的。但是，如果您的应用使用任何 Vuetify 组件，您将看到与 _grid.sass 相同的错误，并且适用相同的解决方法：

// @import '~vuetify/src/styles/main.sass' ❌ SassError: This file is already being loaded.
@import '~vuetify/src/styles/tools/_index'
@import '~vuetify/src/styles/settings/_index'
@import '~vuetify/src/styles/generic/_index'
@import '~vuetify/src/styles/elements/_index'
@import '~vuetify/src/styles/utilities/_index'

// @import '~vuetify/src/components/VGrid/_grid.sass' ❌ SassError: This file is already being loaded.
.shrink
  flex-grow: 0 !important
  flex-shrink: 1 !important

.myTest
  @extend .mr-1
  @extend .shrink

当您需要扩展特定于组件的样式时，这种方法就会变得笨拙。

此外，由于这会将您的 main.sass 的内容添加到所有 Sass 入口点，您可能会注意到构建/开发时间显着延迟（影响开发人员体验），并且您的构建输出中有相当大的供应商 CSS 块。

更好的选择

您可以通过在main.js 中导入您的main.sass 来避免上述警告：

import '@/main.sass'

demo 1

另一方面，如果您只需要在特定组件中使用这些样式，请改用本地样式：

<script>
import '@/main.sass'
</script>

demo 2

<!-- or -->
<style lang="sass">
@import '~@/main.sass'
</style>

demo 3

<!-- or -->
<style lang="sass">
@import '~vuetify/src/styles/main.sass'
@import '~vuetify/src/components/VGrid/_grid.sass' // for .shrink

.myTest
  @extend .mr-1
  @extend .shrink
</style>

demo 4

【讨论】：

vuetify repo github.com/vuetifyjs/vuetify/issues/12646也提到了这个问题

@LastM4N 我运行了一些测试来验证 GitHub 问题中提到的重复样式问题，但无法重现。我的测试在输出中显示 no 重复的 Vuetify 类。即使在多个组件中导入了main.sass，甚至使用范围样式（使用 Vue CLI 5.0.0-alpha.4 测试），CSS 缩小似乎也能正确消除重复样式。

【参考方案2】：

所以，感谢 Vue CLI 和一些文档，我做到了。这是我的github repo，这是codesandbox。

基本上，设置如下：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify(
  theme: 
    options:  customProperties: true , // interesting part
  ,
)

我不确定vue.config.js 和webpack.config.js 的配置，因为它还取决于您的node-sass 和sass-loader 的版本，但是您说您自己处理得很好，所以不用担心我猜测。

我在我写的App.vue文件中做了示例<div id="priority" class="medium">hello, this is working !</div>

有一个global.sass 文件将定位它的div 标记并应用color: var(--v-warning-base)。 有一个global.scss 文件将针对它的.medium 类并应用color: var(--v-accent-base)。 最后，组件本身将定位它的#priority id 并应用color: var(--v-error-base)。

感谢this post，我找到了答案，也给它点个赞吧！

【讨论】：

你好@kissu，我不太确定你是否回答了这个问题。您能否提供一个使用 vuetify 内部类的具有 css 类的沙箱？例如，一些 vuetify 类用于间隔 mr-1 、 pa-5。您能否将它们包含在 css 类中以关闭赏金？