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?

Sass imports must always be a relative import. Webpack knows that you mean your src folder with the '@' (probably because of an alias setting somewhere) and replaces them in JS files on compilation, but can't do that for your sass. Changing that might make your import statement valid. — Excalibaard
– Excalibaard, Commented Apr 30, 2020 at 11:52
That import works though... It's the import line that tries to import 'styles' in 'about.vue' which causes the error. If I remove that, the other import works fine — Matt
– Matt, Commented Apr 30, 2020 at 12:07
It's even mentioned in the docs that I can use @ in the config file specifically, don't think that's the issue — Matt
– Matt, Commented Apr 30, 2020 at 12:08
Ah, when I tried to use prependData for vuetify's sass variable import that was one of the caveats I ran into, but I'm using a non-Vue CLI webpack config. The only situation I can think of otherwise is that it could be the order that your loaders are in, because seems it's already transformed once it's handed to sass-loader (I think this because of the presence of the semicolon and the bracket). I hope others may have a more certain answer! — Excalibaard
– Excalibaard, Commented Apr 30, 2020 at 12:32
I agree I also thought it has to do with the loader order but can't seem to fix it — Matt
– Matt, Commented Apr 30, 2020 at 13:50

Ben Carey · Accepted Answer · 2020-05-02 21:43:11Z

17

+50

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

answered May 2, 2020 at 21:43

Ben Carey

17k20 gold badges95 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Serge van den Oever Over a year ago

is it possible to get this to work with Rollup as well?

pmrotule Over a year ago

@SergevandenOever I'm asking myself the same question: stackoverflow.com/questions/68588047/…

PaulCo Over a year ago

I think it is undocumented because it is not a Sass feature but a css-modules one called ICSS that works with the css-loader with Webpack

Peter T. Over a year ago

When I use :export in one of my SCSS files, I get an webpack error: "Error: Module parse failed: Unexpected token" using [email protected][email protected][email protected] in an Angular / TS app. Any idea what is missing?

Otto G Over a year ago

It does work with Rollup, as long as the :export rule is in a file named *.module.scss rather than *.scss. However, it would be useful to be able to exclude such files from css bundle compilation. (To avoid the inclusion of rules like :export { /* the exports ... */ } in the compiled css.) Does anyone know how to do that with Vite/Rollup?

ux.engineer · Accepted Answer · 2020-05-04 06:16:15Z

3

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.

edited May 4, 2020 at 6:16

answered May 4, 2020 at 6:13

ux.engineer

11.6k15 gold badges70 silver badges115 bronze badges

1 Comment

Matt Over a year ago

Ah this is very interesting. Thank you for adding this in, I didn't know this was possible!

Aly Radwan · Accepted Answer · 2020-07-09 10:56:09Z

1

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

answered Jul 9, 2020 at 10:56

Aly Radwan

3193 silver badges6 bronze badges

1 Comment

Matt Over a year ago

The initial question was asking how to do this in SASS, not SCSS

Collectives™ on Stack Overflow

Cannot Export Sass Variables into Javascript

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related