In my Vue application with TypeScript, I encountered an error during compilation that reads as follows:
Failed to compile.
./src/style.scss (C:/../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!C:/.../node_modules/vue-loader/lib/loaders/stylePostLoader.js!C:/.../node_modules/postcss-loader/src??ref--8-oneOf-1-2!./src/style.scss)
Module build failed (from C:/.../node_modules/postcss-loader/src/index.js):
SyntaxError
(10:14) Unknown word
8 |
9 | @if $point == big {
> 10 | @media #{$bp-big} {
| ^
11 | @content;
12 | }
I'm confused as to why SCSS is not recognizing variables. What does the "Unknown word" message mean and how could I resolve this issue?
This snippet shows how my app.vue looks like:
<template>
...
</template>
<style lang="scss">
@import url('./style.scss');
</style>
Here's the mixin definition inside style.scss:
@mixin bp($point) {
$bp-xsmall: '(min-width: 320px)';
$bp-teeny: '(min-width: 480px)';
$bp-tiny: '(min-width: 600px)';
$bp-small: '(min-width: 650px)';
$bp-medium: '(min-width: 800px)';
$bp-big: '(min-width: 1000px)';
@if $point == big {
@media #{$bp-big} {
@content;
}
} @else if $point == medium {
@media #{$bp-medium} {
@content;
}
} @else if $point == small {
@media #{$bp-small} {
@content;
}
} @else if $point == tiny {
@media #{$bp-tiny} {
@content;
}
} @else if $point == teeny {
@media #{$bp-teeny} {
@content;
}
} @else if $point == xsmall {
@media #{$bp-xsmall} {
@content;
}
}
}