How to override Vuetify 2 variables without using Vue CLI

Question

The vuetify documentation only provides example for injecting sass variables using vue-cli configuration in vue.config.js https://vuetifyjs.com/en/customization/sass-variables#markup-js-vue-config-sass-variables

What is the correct way to provide the modified vuetify variables when not using the CLI?

I am upgrading an older project from v1 (stylus) to v2 (sass) and I need to override some variables, lets say I only need to change the font-family to Arial.

I am also using treeshaking with vuetify.

Now I am kind of stuck because I don't know where to import the style overrides... Importing these in src/main.ts obviously does not work.

I have created a minimal repro here: https://github.com/Sharsie/vuetify-theme-repro/

What I have so far is a webpack config in build directory and style overrides in src/styles/main.scss

$body-font-family: Arial;

@import "~vuetify/src/styles/styles.sass";

Running the project creates a simple page that prints out computed styles for the v-app container

  <v-app id="app">
    <v-container>
      <v-content>
        <p>Wanted font-family: Arial</p>
        <p>Current font-family: {{ fontFamily }}</p>
      </v-content>
    </v-container>
  </v-app>

Arnie · Accepted Answer · 2019-09-01 10:26:00Z

After digging through the source code of vue-cli, I figured out that the config just gets passed to sass-loader options, so the solution was pretty straightforward:

Instead of providing the stylesheet with variables through vue.config.js as such:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/styles/main.scss"`,
      },
    },
  },
}

You can provide it directly to sass-loader options in webpack config like this:

module.exports = {
  ...
  module: {
    rules: [
    ...
    {
      test: /\.(s?c|sa)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            implementation: sass,
            sassOptions: {
              fiber: fibers,
            },
            prependData: `@import "~/styles/main.scss"`,
          },
        },
      ],
    }
    ...
    ]
  }
  ...
}

or for sass-loader<8.0.0

            options: {
              implementation: sass,
              fiber: fibers,
              data: `@import "~/styles/main.scss"`,
            },

Collectives™ on Stack Overflow

How to override Vuetify 2 variables without using Vue CLI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related