Почему неизвестное слово в vue scss компилируется?

Question

У меня есть приложение vue с использованием машинописного текста, и когда я компилирую свой код, я получаю следующую ошибку:

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 |     }

Я не уверен, почему scss не распознает переменные? что значит Неизвестное слово ? и как решить эту проблему?

Вот так выглядит мой app.vue:

<template>
  ...
</template>

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

Вот миксин внутри 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;
    }
  }
}

Answer 1

Используете ли вы sass-loader и vue-style-loader?

в webpack.config.js модулях

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

Если что-то кажется проблемой веб-пакета, и использование машинописи не будетиметь какое-либо отношение к этому.Было бы полезно увидеть ваш webpack.config

Кроме того, вместо того, чтобы импортировать эти стили в тег в App.vue, вы можете импортировать их в свой main.js, например

import './styles.scss';

* 1014.* Это все еще требует правильных загрузчиков, хотя.