Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot Export Sass Variables into Javascript

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?

like image 393
Matt Avatar asked Apr 30 '20 06:04

Matt


People also ask

Can you use SCSS variables in JS?

To make Sass (or, specifically, SCSS in this case) variables available to JavaScript, we need to “export” them. The :export block is the magic sauce webpack uses to import the variables. What is nice about this approach is that we can rename the variables using camelCase syntax and choose what we expose.

How do I export variables in SCSS?

Exporting variables from SCSS stylesheet $myCustomVariable: #424242; After we defined anywhere in our SCSS stylesheet this variable, we are working with two custom SCSS functions. You should use the define-custom-property($name, $value) which accepts 2 parameters to define a new custom variable for export.

Can I use SASS variables in HTML?

Sass variables that are initialized outside the scope of a selector, is part of the global scope and can be used anywhere in the document. Sass variables that are initialized inside the scope of a selector can only be used within that selector. The local variable $col-text is only available to be used inside html .


2 Answers

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

like image 145
Ben Carey Avatar answered Oct 04 '22 14:10

Ben Carey


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.

like image 45
ux.engineer Avatar answered Oct 04 '22 13:10

ux.engineer