Question

我正在使用打字稿，vue和webpack4。所有软件包已更新到最新版本，我尝试了深度选择器，并添加了<v-app>包装程序，但没有一个程序可以加载vue样式模板

不确定，这是怎么回事

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ha</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
    <div id="app">
    </div>
</body>

</html>

Webpack

import { resolve } from 'path'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

export default {
    entry: ('./frontend-src/index.ts'),
    output: {
        path: resolve(__dirname, '../../dist/'),
        filename: 'bundles/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                }
            },
            {
                test: /\.css?$/,
                loader: 'css-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ],
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'bundles/[name].css',
        }),
        new HtmlWebpackPlugin({
            hash: true,
            filename: 'index.html',
            template: './frontend-src/index.html'
        }),
        new VueLoaderPlugin()
    ],
    optimization: {
        minimize: true,
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.(s*)css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    node: {
        net: 'empty'
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    mode: 'development'
}

代码

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

Vue

<template>
  <div>
    <TabCard :tabs="tabs" :initialTab="initialTab">
      <template slot="tab-head-james">James</template>
      <template slot="tab-panel-james">
        <h2 class="title">James Potter</h2>
        <p class="description">
          James Potter is a young wizard who fought against Voldemort in the
          1970s, only to be killed along with his wife Lily while trying to
          protect their 15-month-old son Harry.
        </p>
        <p class="description">
          He was a descendant of Ignotus Peverell and the only child of wealthy,
          elderly parents.
        </p>
      </template>
      <template slot="tab-head-lily">Lily</template>
      <template slot="tab-panel-lily">
        <h2 class="title">Lily Potter</h2>
        <p class="description">
          Lily J. Potter was a Muggle-born witch, the younger daughter of Mr and
          Mrs Evans, and the younger sister of Petunia Evans.
        </p>
        <p class="description">
          She sacrificed herself to save Harry and caused Voldemort to loose the
          <strong>First Wizarding War</strong>.
        </p>
      </template>
      <template slot="tab-head-snape">Snape</template>
      <template slot="tab-panel-snape">
        <h3 class="title">no description needed</h3>
        <img
          class="image"
          src="https://media1.tenor.com/images/b58f4b6f5cc71fb1d9663c66d0b42cb7/tenor.gif"
          alt
        />
      </template>
    </TabCard>
  </div>
</template>

<script>
import TabCard from "./components/TabCard.vue";

export default {
  name: "App",
  components: {
    TabCard
  },
  data() {
    return {
      initialTab: "james",
      tabs: ["james", "lily", "snape"]
    };
  }
};
</script>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #eee;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Roboto", sans-serif;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.title {
  margin-top: 10px;
  margin-bottom: 20px;
}

.description {
  margin-top: 5px;
  max-width: 85%;
  line-height: 22px;
  margin-bottom: 10px;
}

.image {
  height: 160px;
  width: auto;
}
</style>

我对Vue很陌生，已经搜索了一段时间，但似乎没有找到解决方案。与问题无关的任何其他建议也将受到欢迎！

Vue未加载样式模板

0 个答案: