Cannot Export Sass Variables into Javascript

Question

I'm trying to export the following SASS variables into Javascript within my Vue project.

_export.sass

:export
    colorvariable: blue
    othercolorvariable: red

I'm following the response in this post as a template. However when I try to import my sass file below...

About.vue

<script>
import styles from "@/styles/_export.sass";

export default {
    name: "About",
    data() {
        return { styles };
    }
};
</script>

I receive the following error:

WAIT  Compiling...                                                                                                 2:17:03 AM

98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                             2:17:03 AM

 error  in ./src/styles/_export.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after '...les/main.sass";': expected 1 selector or at-rule, was "export: {"
        on line 1 of /Users/MatthewBell/GitHub/pollify/client/src/styles/_export.sass
>> @import "@/styles/main.sass";

   -----------------------------^


 @ ./src/styles/_export.sass 4:14-227 14:3-18:5 15:22-235
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/About.vue?vue&type=script&lang=js&
 @ ./src/views/About.vue?vue&type=script&lang=js&
 @ ./src/views/About.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.2.37:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

If I remove import styles from "@/styles/_export.sass"; the code compiles fine.

I've researched this error and found this post here which seems to imply that my Vue config file is not set correctly. Here is my vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/main.sass"`
            }
        }
    }
};

Note that main.sass referenced above does not import _export.sass. And again, this has worked fine for me until I tried importing _export.sass into my JS file.

I want to import _export.sass variables into the JS script, as shown above, how can I achieve this?

Answer 1

Unfortunately the SASS/SCSS documentation does not mention anything about export, and as such, other than guessing and solving it through trial and error, your best bet is to migrate to SCSS and implement the solution that is widely used (but also not documented).

Personally, I like to import my SCSS variables, and then, export them to JS. So my _export.scss file looks like this:

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    some-light-blue: $some-light-blue;
    battleship-grey: $battleship-grey;
    // etc...

}

NOTE: It is vitally important that _export.scss is only utilised in JS files, and is not imported in SCSS files. Importing _export.scss into your SCSS files will result in a) unecessary style exports in your CSS, and b) duplications of these style exports throughout every compiled SCSS file

Answer 2

You can use CSS Modules in you Vue SFC styles block, which would look something like this:

<template>
  <button :class="$style.button" />
</template>

<style module>
  .button {
    color: red
  }
</style>

Also please note that often times people are talking about using Sass, but in actuality they are or should be using .scss file type, which is the modern syntax compared to older .sass, but its a matter of taste really.

Answer 3

global.scss

$primary-color: #d51a1a; //Red

:export {
  appColor: $primary-color;
}

app.vue

import variables from '../global.scss'

you can access it by using :

variables.locals.appColor