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

也可以将这些样式导入main.js中，而不是将这些样式导入App.vue中的标签中

import './styles.scss';

尽管如此，这仍然需要正确的装载程序。

为什么vue scss中的未知单词会编译？

1 个答案: