时间戳

首页 > 解决方案 > 无法在 monorepo vue 应用程序的故事书中使用 scss - 模块构建错误 lang="scss"

javascript - 无法在 monorepo vue 应用程序的故事书中使用 scss - 模块构建错误 lang="scss"

问题描述

我在现有的 monorepo 中添加故事书，并在尝试通过以下方式添加 scss 时不断出错<style lang="scss">：

ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

这是monorepo结构的轮廓：

package.json
.storybook
  |_ main.js
  |_ preview.js
client
  |_package.json
  |_ src
    |_components
    |_styles
    |_stories

相关的根 package.json 如下所示：

  "scripts": {
    "build": "yarn workspaces foreach run build",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "devDependencies": {
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.3.7",
    "@storybook/addon-docs": "^6.3.7",
    "@storybook/addon-essentials": "^6.3.7",
    "@storybook/addon-links": "^6.3.7",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/vue3": "^6.3.7",
    "@types/mdx-js__react": "^1",
    "css-loader": "^6.2.0",
    "node-sass": "^6.0.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "vue-loader": "^16.5.0"
  }

这是我的 .storybook/main.js

const path = require('path');

module.exports = {
  "stories": [
    "../client/src/stories/**/*.stories.mdx",
    "../client/src/stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss"
  ],
  webpackFinal: async (config, { configType }) => {
  config.module.rules.push(
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    }
  );

    return config;
  },
}

在我的 vue 组件中，尝试使用<style lang="scss">会引发上述错误。我认为 scss 将由 .storybook/main.js 中所做的更改来处理，但它不起作用，我想知道它是否与 monorepo 和两个 package.json 有关，或者它是否与其他东西有关。

标签： javascriptsassloaderstorybookmonorepo

解决方案

根据您提供的 package.json，您可能会遇到此错误：

https://github.com/webpack-contrib/sass-loader/issues/923

简而言之，在sass-loader v11.0.0没有 Webpack v5 的情况下使用 Vue 3 或更高版本会导致此错误。临时解决方案可能是安装已知兼容版本sass-loader：

npm install --save-dev sass-loader@10.1.1

或者，如果使用纱线：

yarn add --save-dev sass-loader@10.1.1

推荐阅读