在 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

似乎只有在导入时才能找到间距辅助类（包括） ，而不是. 该类位于..mr-1vuetify/src/styles/main.sassstyles.sass.shrinkvuetify/src/components/VGrid/_grid.sass

\n

所以你的main.sass应该看起来像这样：

\n

@import \'~vuetify/src/styles/main.sass\'\n@import \'~vuetify/src/components/VGrid/_grid.sass\' // for .shrink\n\n.myTest\n  @extend .mr-1\n  @extend .shrink\n

\n

sass-loader配置

\n

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

\n

// vue.config.js\nmodule.exports = {\n  css: {\n    loaderOptions: {\n      sass: {\n        // sass-loader >= 8\n        additionalData: `@import "~@/path/to/main.sass"`\n\n        // sass-loader < 8\n        data: `@import "~@/path/to/main.sass"`\n      }\n    }\n  },\n}\n

\n

前置全局样式

\n

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

\n

// @import \'~vuetify/src/styles/main.sass\' \xe2\x9d\x8c SassError: This file is already being loaded.\n@import \'~vuetify/src/styles/tools/_index\'\n@import \'~vuetify/src/styles/settings/_index\'\n@import \'~vuetify/src/styles/generic/_index\'\n@import \'~vuetify/src/styles/elements/_index\'\n@import \'~vuetify/src/styles/utilities/_index\'\n\n// @import \'~vuetify/src/components/VGrid/_grid.sass\' \xe2\x9d\x8c SassError: This file is already being loaded.\n.shrink\n  flex-grow: 0 !important\n  flex-shrink: 1 !important\n\n.myTest\n  @extend .mr-1\n  @extend .shrink\n

\n

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

\n

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

\n

更好的选择

\n

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

\n

import \'@/main.sass\'\n

\n

演示1

\n

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

\n

<script>\nimport \'@/main.sass\'\n</script>\n

\n

演示2

\n

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

\n

演示3

\n

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

\n

演示4

\n