Why is unknown word in vue scss compile?

Question

I have vue application using typescript and when I compile my code then I getting the following error:

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 not sure why scss not recognize variables? what does mean of Unknown word ? and how to solve this issue?

This is how my app.vue looks:

<template>
  ...
</template>

<style lang="scss">
@import url('./style.scss');
</style>

Here is the mixin 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;
    }
  }
}

Endoskeleton

Answer 1

I recently had the exact same error Unknown word after doing extensive modifications of the <style> section even if I didn't even change anything (git diff showing no difference) or even if I completely removed the <style> section of my file.

The issue turned out to be some badly compiled SCSS files.

Solution

For people using Nuxt, you can do:

$ npx nuxi cleanup

For others, the above command simply removes the following directories:

.nuxt
.output
node_modules/.vite
node_modules/.cache

Re-running my app worked flawlessly afterward.

I was also able to reproduce this issue several times and the same fix worked each time.

Charlesettacharleston

Answer 2

Are you using sass-loader and vue-style-loader?

in webpack.config.js modules

{
    test: /\.scss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        'sass-loader',
        'postcss-loader',
    ],
},

If anything this looks to be a webpack issue, and using typescript wouldn't have anything to do with this. It would be useful to see your webpack.config

Also instead of importing these styles in to the tag in the App.vue you could import them in your main.js like this

import './styles.scss';

This still requires the correct loaders though.

Prentice

Answer 3

Changing this @import url('./style.scss'); to @import './style.scss'; will solve the error

In a Vue.js application, when you use @import './style.scss'; instead of @import url('./style.scss');, you're making use of a modern SCSS import syntax.

Here's why this change works:

Webpack and SCSS Loader: Vue.js projects typically use Webpack along with a SCSS loader to process SCSS files. The SCSS loader knows how to handle SCSS imports.

File Resolution: In modern SCSS setups, you don't need url() when importing SCSS files because the SCSS loader can automatically resolve and import the file correctly.

Simplicity and Consistency: Using @import './style.scss'; is simpler and aligns with modern SCSS practices. It keeps your codebase consistent, making it easier to maintain and less prone to errors.

Emmanuelemmeline

did you use any AI at all in the writing of any part of this answer? – Schizothymia