vue.js - 在 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-loader ，鉴于 sass.data配置。如果使用版本 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上面的配置，导入 vuetify/src/styles/main.sass在您项目的根目录中 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.sass 来避免上述警告。在 main.js :

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