标签: vuetify-loader

我正在使用 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 文件添加到插件目录中，其中包含以下内容： …

我从 Gitlab 下载了项目（带有 vue.js 的 Laravel），在我安装了依赖项（npm install 和 composer install）后，我无法编译它，因为当我尝试输入：npm run watch 时，出现以下错误：

注意：我删除了 package-lock.json 因为没有删除它我得到了错误：

npm install

K:\pharma\node_modules\webpack-cli\bin\cli.js:281
                                throw err;
                                ^

Error: [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.
    at VueLoaderPlugin.apply (K:\pharma\node_modules\vue-loader\lib\plugin-webpack4.js:46:13)
    at webpack (K:\pharma\node_modules\webpack\lib\webpack.js:51:13)
    at processOptions (K:\pharma\node_modules\webpack-cli\bin\cli.js:272:16)
    at K:\pharma\node_modules\webpack-cli\bin\cli.js:364:3
    at Object.parse (K:\pharma\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18)
    at K:\pharma\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (K:\pharma\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (K:\pharma\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js …

我目前在编译我的项目时遇到问题，已经尝试过这个解决方案，但是当我部署应用程序时，我的工具栏和其他一些组件失去了它们的基本样式。我当前的package.json。

  "dependencies": {
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "coordinates-converter": "0.0.2",
    "core-js": "^2.6.11",
    "css-loader": "^3.6.0",
    "d3": "^5.16.0",
    "jquery": "^2.2.4",
    "justgage": "^1.4.0",
    "konva": "^7.1.3",
    "lodash": "^4.17.20",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.29.1",
    "portfinder": "^1.0.28",
    "register-service-worker": "^1.6.2",
    "sass": "^1.26.12",
    "serve": "^11.3.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.12",
    "vue-konva": "^2.1.6",
    "vue-material-design-icons": "^4.9.0",
    "vue-morris": "^1.0.1",
    "vue-mqtt": "^2.0.3",
    "vue-router": "^3.4.6",
    "vue-speedometer": "^1.7.0",
    "vuetify": "^2.3.13",
    "vuetify-loader": "^1.6.0",
    "vuex": "^3.5.1",
    "xlsx": "^0.15.1"
  },

我收到这些警告

warning
chunk chunk-37cf0e67 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VDivider/VDivider.sass
despite it was …

我正在尝试在 laravel 上安装 vue。我相信我明白了，但是当我运行 npm run watch 或 npm run dev 时，它会生成此错误。我尝试了几件事但无法解决

Error: [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.
    at VueLoaderPlugin.apply (C:\laravel\construtora2\node_modules\vue-loader\lib\plugin-webpack4.js:46:13)
    at webpack (C:\laravel\construtora2\node_modules\webpack\lib\webpack.js:51:13)
    at processOptions (C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:272:16)
    at C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:364:3
    at Object.parse (C:\laravel\construtora2\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18)
    at C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\laravel\construtora2\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as …

我在使用以下配置运行示例应用程序时遇到以下问题。

包.json

> "vue": "^3.0.0", 
> "vue-textarea-autosize": "^1.1.1", 
> "vuetify":"^3.0.0-alpha.0"

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import 'vuetify/dist/vuetify.css'
app.use(vuetify).use(VueTextareaAutosize)

低于警告且组件不可见。谁可以帮我这个事？