[Vuejs]-How to override Vuetify 2 variables without using Vue CLI

by

5👍

✅

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"`,
            },
👤Arnie

Leave a comment