Nuxt & Vuetify: How to Control The Order in Which CSS Files Are Loaded

Nuxt & Vuetify: how to control the order in which CSS files are loaded?

It seems like it's an open issue with Nuxt, and it's unfortunately not solved. Vuetify says they don't think it's on their side:
https://github.com/vuetifyjs/vuetify-loader/issues/23

As of Nuxt ^2.7.1, people are having issues with inconsistent css file loading. There's a reference to it in this issue, as well as this issue.

It does seem like they are attempting to fix it, as noted here. Unfortunately though, until this is released, I don't believe there's much you could do besides reverting to a lower version.

css changed after nuxt generate

After some more digging it seems to be a known issue with nuxt.
It happens when declaring styles in non-scoped style tag, and using it somewhere else.

I followed these steps: https://stackoverflow.com/a/60925793/9103301

which is basically integrating Vuetify into nuxt manually and not with @nuxt/vuetify.
then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).

a more basic vuetify plugin that worked for me:

import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)

export default (ctx) => {
  const vuetify = new Vuetify({
    theme: {
      dark: false, // From 2.0 You have to select the theme dark or light here
    },
  })

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

You'll have to install icons as well, vuetify default is mdi which is installed with npm install @mdi/font -D

How to prevent Vue global css overwriting itself multiple times

In your vue.config.js put only variables, mixins, functions.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/sass/_colors.scss";
          @import "@/assets/sass/_variables.scss";
          @import "@/assets/sass/_mixins.scss";
          @import "@/assets/sass/_functions.scss";
        `
      }
    }
}

Now, in styles.scss put your styles, for instance:

@import "reset";
@import "base";
@import "fonts";
@import "z-index";
@import "transitions";
@import "util";

In your main.js import styles.scss

import '@/assets/styles/styles.scss'

Markdown styles not getting loaded in Nuxt + Vue project

The solution to this was using Tailwind CSS's typography plugin.

Here are the steps to be followed:

Install the plugin first.

Using npm

npm install @tailwindcss/typography

Using Yarn

yarn add @tailwindcss/typography.

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Then add the prose class to the element where you are displaying the markdown.

<div class="prose" v-html="cleanedMarkdown"></div>.

This provided the needed formatting for the markdown.

Overriding Vuetify variables

Actually the solution is, and I'm dumb for not thinking of this before, to add another loader to vue.config.js:

css: {
  sourceMap: productionSourceMap,
  loaderOptions: {
    scss: {
      prependData: `@import '@/scss/_common.scss';`
    },
    sass: {
      prependData: `@import '@/sass/_vuetify-variables.sass';`
    }
  }
},

Since vuetify is using sass as the css pre-processor, it needs sass-loader to handle the variable overrides and apply it to the framework.

Vuetify CSS missing when i build for production

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">

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.

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'`,
          ];
        }
      },
    }),
  ],
}

---

Related Topics