In my Vue project, I am attempting to export SASS variables into Javascript by using the following code snippet:
_export.sass
:export
colorvariable: blue
othercolorvariable: red
I found inspiration from a post on Stack Overflow for this approach. However, when I try to import my sass file as shown below...
About.vue
<script>
import styles from "@/styles/_export.sass";
export default {
name: "About",
data() {
return { styles };
}
};
</script>
I encounter 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 exclude
import styles from "@/styles/_export.sass";After researching this error, I came across a related post that suggests my Vue configuration file might not be set up correctly. Here is my vue.config.js:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/main.sass"`
}
}
}
};
It is important to note that the main.sass file mentioned above does not import _export.sass. However, everything was functioning correctly until I attempted to import _export.sass into my Javascript file.
My goal is to successfully import the variables from _export.sass into my JS script, similar to the code snippet above. How can I accomplish this?