从Vuetify 1.5升级到2.1时遇初始化及编译错误求助

Hey there! Let's work through this Vuetify upgrade problem step by step—since you're coming from a .NET background, Webpack configs can feel like a whole different world, so I'll break this down as clearly as possible.

First, Let's Understand the Root Problems #

1. The initial Error: Vuetify is not properly initialized happened because Vuetify 2.x changed how you import and initialize the library compared to 1.5.
2. The subsequent Sass loader errors occur because Vuetify 2.x uses raw .sass/.scss files for component styles (instead of pre-compiled CSS), and your Webpack setup doesn't have the right loaders to process these files.

Step 1: Install Required Sass Dependencies #

First, we need to add the loaders Webpack needs to parse Sass files. Run these commands in your VS Code terminal:

# Install compatible versions (matches older Webpack setups common in .NET Core Vue projects)
npm install sass-loader@^8.0.2 node-sass@^4.14.1 --save-dev

We're specifying exact versions here because newer versions of these loaders might conflict with the Webpack version included in your .NET Core template.

Step 2: Update Webpack Config to Handle Sass Files #

Open your webpack.config.js file and add a new rule to the module.rules array. This tells Webpack how to process .sass and .scss files:

module.exports = {
  // ... other existing config
  module: {
    rules: [
      // Keep all your existing rules (like for Vue, JS, CSS)
      // Add this new rule at the end of the rules array:
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('node-sass'),
              sassOptions: {
                indentedSyntax: true // Required to handle Vuetify's .sass files (which use indentation instead of braces)
              }
            }
          }
        ]
      }
    ]
  }
};

If you already have a rule for .css files, don't remove it—just add this Sass rule alongside it.

Step 3: Fix Vuetify Initialization in app.js #

Vuetify 2.x changed how you initialize the theme and pass it to Vue. Update your app.js code to match this:

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import { sync } from "vuex-router-sync";
import App from "components/app-root";
import { FontAwesomeIcon } from "./icons";
import Editor from "@tinymce/tinymce-vue"
import Vuetify from 'vuetify/lib'; // Keep this updated import
// Remove the old vuetify.min.css import—vuetify/lib handles styles automatically
// import "vuetify/dist/vuetify.min.css";

Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)
Vue.prototype.$http = axios;
sync(store, router);
import globalMixins from "./components/common/mxins/global"
Vue.mixin(globalMixins)

// Initialize Vuetify correctly for v2.x
const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        myColor: "#545454" // Your custom theme color goes here
      }
    }
  }
});

Vue.use(Vuetify);

// Other plugins
Vue.use(require("vue-shortkey"));
var VueCookie = require('vue-cookie');
Vue.use(VueCookie);
Vue.use(VueSanitize, vueSanitizeOptions);
Vue.use(require('vue-moment'));

// Pass the vuetify instance to your Vue app
const app = new Vue({ store, router, vuetify, ...App });
export { app, router, store };

Key changes here:

• We create a vuetify instance with the theme configuration (v2.x requires nesting theme colors under themes.light/dark)
• We pass this instance directly to the Vue constructor instead of passing options to Vue.use(Vuetify)
• We removed the old pre-compiled CSS import since vuetify/lib loads styles on demand

Step 4: Clean and Recompile #

To avoid any cached dependencies, run these commands:

# Windows users: replace rm with rmdir /s /q and del package-lock.json
rm -rf node_modules package-lock.json
npm install
npm run build

Now start your .NET Core project and check if the Vue pages load without errors.

Why This Works #

• Vuetify 2.x's vuetify/lib import uses "tree-shaking" to load only the components you need, but this requires processing raw Sass files—hence the need for the Sass loaders.
• The initialization change aligns with Vuetify 2.x's API, which requires an explicit instance instead of global options.

内容的提问来源于stack exchange，提问作者Toby Fieldgroove