我为生产构建时缺少 Vuetify CSS [英] Vuetify CSS missing when i build for production

问题描述

我们从某人那里购买了一个用 Vue 编写的网络应用程序，我们正在开发以更改/改进它.我们添加的一件事是 Vuetify，因此我们可以使用 Vuetify 元素，并且在开发模式下一切都运行良好，但是当我们为生产构建时，Vuetify 元素的 CSS 丢失了.

We purchased a web app written in Vue from someone and we developing to change/improve it. One thing we added was Vuetify so we can use the Vuetify elements and everything has been working great while in development mode, but when we build for production the CSS for Vuetify elements is missing.

我已经在网上搜索过这个，并且已经尝试了每个人的建议，但没有任何运气.

I have searched for this online already and have already tried what everybody is suggesting without any luck.

有人知道什么是错误的，为什么 npm run build 会丢失一些 CSS?

Anybody has an idea of what could be wrong and why npm run build would be missing some of the CSS?

奇怪的是，Vue 元素的所有 UI 功能都运行良好，只是缺少 CSS.

What's weird is that all the UI functionality for Vue elements is working perfectly, just the CSS is missing.

请参阅下面的代码示例.

Please see code samples below.

main.js:

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from "vue";
import App from "./App.vue";
import VueMoment from "vue-moment";
import VueAnalytics from "vue-analytics";
import VueMeta from "vue-meta";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faCoffee,
  faPlusCircle,
  faChartLine,
  faChevronDown,
  faMobile,
  faEnvelope,
  faClock,
  faUsers,
  faPaperPlane,
  faCheckCircle,
  faCheck,
  faLeaf,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import axios from "axios";
import router from "./router";
import store from "./store";
import vuetify from './plugins/vuetify';
import Vuetify from 'vuetify/lib'

library.add([
  faCoffee,
  faPlusCircle,
  faChartLine,
  faChevronDown,
  faMobile,
  faEnvelope,
  faClock,
  faUsers,
  faPaperPlane,
  faCheckCircle,
  faCheck,
  faLeaf,
]);

Vue.use(VueAnalytics, {
  id: "xxx",
  router,
});
Vue.use(VueMoment);
Vue.use(VueMeta);
Vue.component("font-awesome-icon", FontAwesomeIcon);

Vue.use(Vuetify)

axios.interceptors.response.use(undefined, async function (error) {
  if (error.response.status === 401) {
    await store.dispatch("auth/logout");
    router.push("/login");
  }
  return Promise.reject(error);
});

// Plugins
// ...

// Sass file
require("./assets/styles/main.css");

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App)
}).$mount("#app");

App.vue:

<template>
  <v-app>

    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<style>
  .text-white {
      color: #fff !important;
  }

  .text-gray-600 {
    color: #757575 !important;
  }

  .font-semibold, .text-gray-700 {
    color: #616161 !important;
  }
</style>

package.json:

package.json:

{
  "name": "reviewgrower-spa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "git push dokku master"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/vue-fontawesome": "^0.1.8",
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "axios": "^0.19.0",
    "chart.js": "^2.9.4",
    "core-js": "^2.6.10",
    "i": "^0.3.6",
    "jquery": "^3.5.1",
    "npm": "^6.13.0",
    "tailwindcss-spinner": "^0.2.0",
    "tailwindcss-toggle": "github:TowelSoftware/tailwindcss-toggle",
    "url-parse": "^1.4.7",
    "vue": "^2.6.10",
    "vue-analytics": "^5.17.2",
    "vue-chartjs": "^3.5.1",
    "vue-click-outside": "^1.0.7",
    "vue-clickaway": "^2.2.2",
    "vue-feather-icons": "^4.22.0",
    "vue-js-toggle-button": "^1.3.3",
    "vue-meta": "^1.6.0",
    "vue-moment": "^4.0.0",
    "vue-router": "^3.1.3",
    "vue-stripe-elements-plus": "^0.2.10",
    "vuetify": "^2.4.0",
    "vuex": "^3.0.1",
    "vuex-persist": "^2.1.1"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.3",
    "sass": "^1.32.0",
    "sass-loader": "^7.1.0",
    "tailwindcss": "^1.1.3",
    "vue-cli-plugin-vuetify": "~2.1.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.7.0"
  }
}

推荐答案

有点难以理解哪里缺少什么.如果您认为这只是缺失，请尝试从 CDN 将 css 添加到 HTML 文件中并检查工作.

It's a little tough to understand what is missing where. If you think that is just missing then please try adding css onto the HTML file from the cdn and check the working.

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

我看到您正在使用 webpack 来编译代码.所以，这也可能与 webpack 配置有关.在你的 webpack 规则中，你有 css 和 scss 的规则吗?因为 vuetify 文件在 scss 中.

I see that you are using webpack to compile the code. So, this could be also something related to webpack configuration. In your webpack rules do you have rules for css and scss. Because vuetify files are in scss.

当我做这些类型的马戏时，我的 webpack 配置如下.

My webpack configuration is as below when I do these type of circus.

--webpack.config.js--
const path = require("path");

const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
watch: true,
entry: {
 main: 'main.js'
},
module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            // Requires sass-loader@^8.0.0
            // options: {
            //   implementation: require('sass'),
            //   sassOptions: {
            //     fiber: require('fibers'),
            //     indentedSyntax: true // optional
            //   },
            // },
          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new VuetifyLoaderPlugin({
      /**
       * This function will be called for every tag used in each vue component
       * It should return an array, the first element will be inserted into the
       * components array, the second should be a corresponding import
       *
       * originalTag - the tag as it was originally used in the template
       * kebabTag    - the tag normalised to kebab-case
       * camelTag    - the tag normalised to PascalCase
       * path        - a relative path to the current .vue file
       * component   - a parsed representation of the current component
       */
      match(originalTag, { kebabTag, camelTag, path, component }) {
        if (kebabTag.startsWith("core-")) {
          return [
            camelTag,
            `import ${camelTag} from '@/components/core/${camelTag.substring(
              4
            )}.vue'`,
          ];
        }
      },
    }),
  ],
}

这篇关于我为生产构建时缺少 Vuetify CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！