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?
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.
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.
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 .
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With