css - 为什么 vue scss 中的 unknown word 会被编译？

Question

我有一个使用 typescript 的 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:

@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 问题，那么使用 typescript 与此无关。查看您的 webpack.config 会很有用

此外，除了将这些样式导入到 App.vue 中的标签中，您还可以像这样将它们导入到您的 main.js 中

import './styles.scss';

不过这仍然需要正确的加载程序。