在 SASS 中使用 Vuetify 类

Question

我想在我自己的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 都按预期工作，所以我相信接线是正确的。

Answer 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

Answer 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，我找到了答案，也给它点个赞吧！