相关疑难解决方法(0)

我正在使用SASS的SCSS语法创建一个动态网格系统,但我遇到了麻烦.

我试图使网格系统完全动态,如下所示:

$columns: 12;

然后我创建这样的列:

@mixin col-x {
  @for $i from 1 through $columns {
  .col-#{$i} { width: $column-size * $i; }
  }
}

哪个输出:

.col-1 {
    width: 4.16667%;
  }

.col-2 {
    width: 8.33333%;
}
etc...

这很好但我接下来要做的是动态生成一个由逗号分隔的列类的长列表,基于所选的$列数 - 例如我希望它看起来像这样:

.col-1,
.col-2,
.col-3,
.col-4,
 etc... {
float: left;
}

我累了这个:

@mixin col-x-list {
  @for $i from 1 through $columns - 1 {
  .col-#{$i}-m { float: left; }
  }
}

但输出是这样的:

.col-1 {
  float: left;
}
.col-2 {
  float: left;
} …

我正在使用 Vue 3、Vuetify 3.0.0（beta 0）和最新的 Vue-CLI 开发一个项目。我正在尝试自定义 vuetify 字体，但是我在网上找到的所有覆盖 vue sass 变量的方法都不起作用。

我所做的第一次尝试是使用 vuetify 网站上的 Vuetify 文档：https ://next.vuetifyjs.com/en/features/sass-variables/

使用默认项目，我按照指示添加了styles目录和文件。variables.scss文件内variables.scss有以下内容：

$body-font-family: cursive;

挖掘 Vuetify lib 目录中的变量看起来我需要覆盖这个变量（虽然我将使用自定义字体，但现在草书应该确保使用不同的足够的字体来验证它的工作原理）。

这不起作用，我尝试将目录更改为scss并得到相同的结果（它不导入）请参阅下面的结果图像。

因此，我的第二次尝试是按照文档找到文件，vue.config.js其中它指向https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader#customising-variables。这导致我将vue.config.js文件更改为如下所示：

const { defineConfig } = require("@vue/cli-service");
const { VuetifyLoaderPlugin } = require("vuetify-loader");

module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    plugins: [new VuetifyLoaderPlugin({ styles: "expose" })],
  },

  pluginOptions: {
    vuetify: {
      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
    },
  },
});

将 main.scss 文件添加到插件目录中，其中包含以下内容： …

我知道SO 中的问题change-default-font-in-vuetify，但由于它是在vue-cli-3出来之前发布的，所以并没有解决我的问题，因此这里的想法不适用于那是，Vuetify的官方文档中关于如何更改主题和其他选项 的内容在使用vue-cli 3创建项目时没有任何有效步骤。

到目前为止，我的尝试是这样的：
-vue create fooproject（使用默认配置，但是即使我不使用默认配置，而是选择我想要的项目，并手动选择css-preprocessor作为手写笔，它也无法正常工作）
-vue添加vuetify-
创建一个插件目录：src / plugins，在其中存储vuetify.js-
在HelloWorld组件中添加v-btn只是为了知道字体是否有效
-然后我应该可以导入../手写笔/main.styl，我在其中：

@import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
@import '~vuetify/src/stylus/main'

我什至尝试使用@import'〜vuetify / src / stylus / main'，是否还必须添加其他手写笔加载程序依赖项或其他内容？因为这正是Vuetify网站上不推荐的内容。

错误日志：没有错误，我只是在材质按钮中继续使用Roboto字体

有什么意见吗？

其他尝试：我尝试遵循Jacob E. Dawson编写的步骤，但是可能缺少一些超级傻的东西。