javascript - 根据文档在故事书中设置 sass-loader 但不编译 sass

Question

我正在关注 Storybook 的文档以在我的组件上启用 sass 范围，但是我无法弄清楚正在发生的问题。加载程序似乎出现了一些错误：

ERROR in ./src/stories/Button.vue?vue&type=style&index=0&id=361c6da7&lang=scss&scoped=true& (./node_modules/vue-docgen-loader/lib??ref--12!./node_modules/vue-loader/lib??vue-loader-options!./src/stories/Button.vue?vue&type=style&index=0&id=361c6da7&lang=scss&scoped=true&) 58:7
Module parse failed: Unexpected token (58:7)
File was processed with these loaders:
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> button {
|   span {
|     display: block;

这是我的组件：

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">
    <span>{{ label }}</span>
  </button>
</template>

<script>
import './button.css';

export default {
  name: 'button',

  props: {
    label: {
      type: String,
      required: true,
    },
    primary: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
      validator: function (value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String,
    },
  },

  methods: {
    onClick() {
      this.$emit('onClick');
    },
  },
};
</script>
<style lang="scss" scoped>
button {
  span {
    display: block;
    width: 1000px;
  }
}
</style>

这是故事书的 main.js：

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    "@storybook/addon-actions",
    "@storybook/addon-docs",
    "@storybook/addon-knobs",
    "@storybook/addon-viewport",
  ],
  webpackFinal: async (config, {configType}) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.(css|scss)$/,
      use: [
        'style-loader', 'css-loader', 'sass-loader',
        {
          loader: "sass-loader",
        }
      ],
      include: path.resolve(__dirname, '../')
    });

    return config;
  }
}

我已经将它配置为使用 sass-loader，它应该能够同时编译 css 和 sass。我不确定我是否缺少装载机？

我也vue-loader安装了

标签： javascriptvue.jssassstorybook