DEV Community

Discussion on: How to share SASS variables with JavaScript code in VueJS

View post

Replies for: I get "SassError: This file is already being loaded." because I want to use variables that I already imported globally in config's additionalData.....

Collapse
 
pecus profile image
Matteo Fogli •

I didn't catch this, sorry for the late reply. Sass files added via the additionalData config option will not be made available to your JavaScript context even if you :exportyour sass variables. In order to inject variables in the JavaScript context, you need to explicitly import the sass file that declares and exports them.

// _variables.scss
// this file is added via the additionalData loader option in vue.config.js
$lyrics: 'if you believe';

:export {
  lyrics: unquote($lyrics);
}
Enter fullscreen mode Exit fullscreen mode 
// Component.vue
<script>
import styles from './_variables.scss'
export default {
    data() {
        return {
            lyrics: styles.lyrics,
        }
    },
}
</script>
Enter fullscreen mode Exit fullscreen mode

You may need to set css.requireModuleExtension to false in your vue.config.js.