Impossible d'exporter les variables Sass en Javascript

Question

J'essaye d'exporter les variables SASS suivantes en Javascript dans mon projet Vue.

_export.sass

:export
    colorvariable: blue
    othercolorvariable: red

Je suis la réponse dans ce post comme modèle. Cependant, lorsque j'essaye d'importer mon fichier sass ci-dessous ...

About.vue

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

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

Je reçois l'erreur suivante:

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

Si je supprime import styles from "@/styles/_export.sass"; le code se compile correctement.

J'ai recherché cette erreur et trouvé ce message ici ce qui semble impliquer que mon Vue fichier de configuration n'est pas correctement défini. Voici mon vue.config.js

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

Notez que main.sass référencé ci-dessus n’importe pas _export.sass. Et encore une fois, cela a bien fonctionné pour moi jusqu'à ce que j'essaye d'importer _export.sass dans mon fichier JS.

Je veux importer _export.sass variables dans le script JS, comme indiqué ci-dessus, comment puis-je y parvenir?

Answer 1

global.scss

$primary-color: #d51a1a; //Red

:export {
  appColor: $primary-color;
}

app.vue

import variables from '../global.scss'

vous pouvez y accéder en utilisant:

variables.locals.appColor