CODEWITHSUNDEEP
vue.jssassvuetify.js
Abhijit
Abhijit

Reputation: 73

Issue with repeating custom scss code when overriding saas variables in vue.config.js

What i am trying to do is set up a structure where i can override the Vuetify variables value. Problem is when i import custom scss files with custom classes in it , it gets repeated multiple times. Actuall 92 times to be exact.

I am able to override variables, no issue in that but the custom css i wrote gets repeated multiple times.

Here's my vue.config.js file code

const path = require('path');
const webpack = require('webpack');

module.exports = {
css: {
    loaderOptions: {
      scss: {
         data: `@import "~@/assets/scss/main.scss"`,
          },
    scss: {
    data: `@import "~@/assets/scss/custom.scss"`,
        },
    },
},
chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
         .tap(opt => Object.assign(opt, { data: `@import '~@/assets/scss/style.scss'` }))
    })
 }
};

Here's my main.scss file code

// src/sass/main.scss
// Any changes to a default variable must be
// declared above the initial style import
@import '~vuetify/src/styles/styles.sass';

$font-size-root: 20px;

// Required for modifying core defaults

// Any component modifications must be imported
@import '~vuetify/src/components/VBtn/_variables.scss';

@import '~vuetify/src/components/VList/_variables.scss';

I have already tried giving a single path(main.scss) in vue.config.js file and then further importing custom.scss in main.scss but it gives the same repeating result. What i am doing wrong here? or did i miss something? Ps: I tried following this link https://vuetifyjs.com/en/customization/sass-variables to impletment the above.

Upvotes: 2

Views: 715

Answers (2)

Braxo
Braxo

Reputation: 789

With the chainWebpack code,

sass-loader:8 uses prependData instead of data

What happens if you replace the tap method call with:

tap(opt => Object.assign(opt, { prependData: `@import '~@/assets/scss/style.scss'` }))

Upvotes: 0

Terry
Terry

Reputation: 66123

You should probably be combining the import statement into a single string:

module.exports = {
css: {
    loaderOptions: {
      scss: {
         data: `
            @import "~@/assets/scss/main.scss";
            @import "~@/assets/scss/custom.scss";
            `,
        },
    },
},

Upvotes: 1

Related Questions