vue.js - vuetify2安装问题和css/scss强制

问题描述

我尝试通过多种方式将 Vuetify 添加到我的项目中，但它导致了很多错误（vue cli、vue ui、根据 doc 使用 vuetify 插件文件和特定的 webpack 配置）。所以最后，我决定用更传统的方式来做。但是看起来我并没有使用所有样式。我不能使用 justify="center" v-row（没有样式 . justify-center），容器全高没有全高，v-text-field并且轮廓看起来很糟糕（标签应该在左边，但它在右边，然后你点击它，它的顶部移动到错误的位置）

所以也许有人帮我正确添加它？也许我需要一些额外的加载器或导入更多的 CSS 样式。其中哪个是强制性的？

我是怎么做到的？

1) npm install vuetify --save

2) 在 index.js 中导入 vuetify 和 vuetify.min.css

import Vue from 'vue';
import App from './src/App.vue';
import router from './router';
import Vuetify from 'vuetify';


import './style.scss';
import './node_modules/bootstrap/dist/css/bootstrap-grid.css';
import './node_modules/vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify);

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

3）简单的webpack配置

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    devtool: "source-map",
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                loaders: [
                  'style-loader',
                  'css-loader',
                  'sass-loader',
                ],
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    limit: 10000,
                    name: '[name].[hash:7].[ext]'
                }
             }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
      ]
};

我没有错误。唯一的问题是 vuetify 组件没有正确呈现。

例子：

大纲输入应如下所示：

但看起来：

标签： vue.jssassvuetify.js

import Vuetify from 'vuetify' import colors from 'vuetify/lib/util/colors' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify); new Vue({ el: '#app', vuetify: new Vuetify(), router, render: h => h(App) })

vue.js - vuetify2安装问题和css/scss强制

问题描述

解决方案

推荐阅读