Vuetify: [Bug Report] Unable to utilize SASS variables - breaks build and testing processes

[MatthewAry]

Versions and Environment

Vuetify: 2.0.0
Vue: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Mac OS 10.14.5

Steps to reproduce

• Clone the repo
• npm i
• start dev server
• observe build process output

Expected Behavior

No errors

Actual Behavior

Errors relating to using sass variables on single-file components.

Reproduction Link

https://github.com/MatthewAry/vuetify-sass-variables

Other comments

Some background

I followed the directions https://vuetifyjs.com/en/customization/sass-variables and did some experiments. Attempts to try to use Single File components with styles with the instructions to override vuetify SASS variables fails. https://vuetifyjs.com/en/customization/sass-variables#single-file-components attempts to address this problem but it does not seem to work.

This code:

// vue.config.js

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

will break the build process.

So will this code:

// vue.config.js

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

Note that the Object.assign(opt, { data: `@import '~@/sass/main.sass'` }) and the data: `@import "~@/sass/main.scss";`, paths are different? Trying to make them match also does not fix the problem.

Related to: https://github.com/vuejs/vue-cli/issues/4116
Related to: #7795
Documentation Reference: https://vuetifyjs.com/en/customization/sass-variables

[ZarekParker]

Also having this issue - we can run and serve, but all unit testing fails with sass-loader errors once a vuetify component is added to the HelloWorld.vue component:

https://github.com/ZarekParker/vuetify2-sass-problem

[KaelWD]

So will this code [...]

The paths need to be changed to match what you have in your project, it's just an example.

@ZarekParker not sure about mocha, but jest needs

transform: {
    '\\.s[ac]ss$': 'jest-css-modules'
}

[jnav24]

I am also having this issue with Vuetify 2.0.0. I had to install an older version of Vuetify.

[ganp1020]

+1

[nekosaur]

So I think I got this working in your test repo in two different ways depending on if you want to use scss or sass in the SFC.

sass

Note the absence of a ; on the import statement

// vue.config.js
css: {
  loaderOptions: {
    sass: {
      data: '@import "~@/sass/main.scss"',
      implementation: require("sass"),
      fiber: require("fibers")
    }
  },
  sourceMap: true
}

You can then use sass style in SFC and use variables

<style lang="sass">
.test
  color: map-get($red, 'base')
</style>

scss

Note the config modification where we make sure there is a ; present when using scss

// vue.config.js
css: {
  loaderOptions: {
    sass: {
      data: '@import "~@/sass/main.scss"',
      implementation: require("sass"),
      fiber: require("fibers")
    }
  },
  sourceMap: true
},
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 '~@/sass/main.scss';` }))
  });
}

You can then use scss in SFC

<style lang="scss">
.test {
  color: map-get($red, "base");
}
</style>

[ZarekParker]

@nekosaur that did not have any effect on my project

[MatthewAry]

Okay, so my issue was that the Alias being used in the import path was not mapping to my src folder. I fixed that, and now the issue I was having resolved.

As for the docs on using SASS variables, I think it need significantly more details added to it as without it, there will probably be more issues like these.

I'm leaving this open for the other affected user.

[nekosaur]

@ZarekParker Perhaps try this

In package.json update unit:test script with --require ./tests/noop.js

Add tests/noop.js file with content

function noop () {
  return null
}

require.extensions['.css'] = noop
require.extensions['.less'] = noop
require.extensions['.scss'] = noop
require.extensions['.sass'] = noop

[nekosaur]

Since original issue has been solved, and documentation has been updated, I am closing this issue.

[MatthewAry]

It seems that the documentation that was added in response to this issue has been removed since Vuetify 2.2. What is the recommended way to create global styles that may even override vuetify styles with this update?