Блог

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

 ERROR in ./src/components/atoms/TinyMCE/TinyMCE.vue?vueamp;type=styleamp;index=0amp;id=4762223camp;scoped=trueamp;lang=scss (./node_modules/vue-docgen-loader/lib??ref--12!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/dist??ref--3!./src/components/atoms/TinyMCE/TinyMCE.vue?vueamp;type=styleamp;index=0amp;id=4762223camp;scoped=trueamp;lang=scss) Module build failed (from ./node_modules/style-loader/dist/cjs.js): TypeError: this.getOptions is not a function  at Object.loader (C:trabalhorepositoriesmb-redesign-frontnode_modulesstyle-loaderdistindex.js:19:24)   

Мой main.js файл сборника рассказов настраивается с помощью webpackFinal в соответствии с документами сборника рассказов:

 const path = require("path");  module.exports = {  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],  addons: [  "@storybook/addon-links",  "@storybook/addon-essentials",  "@etchteam/storybook-addon-css-variables-theme",  ],   webpackFinal: async (config, { configType }) =gt; {  // `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: /.scss$/,  use: ["style-loader", "css-loader", "sass-loader"],  include: path.resolve(__dirname, "../"),  });   // Return the altered config  return config;  }, };   

Это мой пакет.json

 {  "name": "vue-3-mb",  "version": "0.1.0",  "private": true,  "scripts": {  "serve": "vue-cli-service serve",  "build": "vue-cli-service build",  "lint": "vue-cli-service lint",  "storybook": "start-storybook -p 6006",  "build-storybook": "build-storybook"  },  "dependencies": {  "@etchteam/storybook-addon-css-variables-theme": "^1.0.2",  "@tinymce/tinymce-vue": "^3",  "@wiris/mathtype-tinymce5": "^7.27.1",  "core-js": "^3.6.5",  "phosphor-vue": "^4.3.1",  "vue": "^3.0.0",  "vue-router": "^4.0.0-0",  "vuex": "^4.0.0-0"  },  "devDependencies": {  "@babel/core": "^7.16.0",  "@storybook/addon-actions": "^6.3.12",  "@storybook/addon-essentials": "^6.3.12",  "@storybook/addon-links": "^6.3.12",  "@storybook/addon-postcss": "^2.0.0",  "@storybook/vue3": "^6.3.12",  "@vue/cli-plugin-babel": "~4.5.0",  "@vue/cli-plugin-eslint": "~4.5.0",  "@vue/cli-plugin-router": "~4.5.0",  "@vue/cli-plugin-vuex": "~4.5.0",  "@vue/cli-service": "~4.5.0",  "@vue/compiler-sfc": "^3.0.0",  "@vue/eslint-config-prettier": "^6.0.0",  "babel-eslint": "^10.1.0",  "babel-loader": "^8.2.3",  "css-loader": "^6.5.1",  "eslint": "^6.7.2",  "eslint-plugin-prettier": "^3.3.1",  "eslint-plugin-vue": "^7.0.0",  "prettier": "^2.2.1",  "sass": "^1.26.5",  "sass-loader": "^8.0.2",  "style-loader": "^3.3.1",  "vue-loader": "^16.8.3"  } }  

And this is the style tag of my component with error:

 lt;style scoped lang="scss"gt;  .TinyMCE {  .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {  color: $gray-dark !important;  svg {  fill: $gray-dark !important;  }  }  .tox-tinymce {  border: 1px solid $cinza-light !important;  border-radius: $border-radius-1 !important;  }  .tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {  margin-right: 0.5rem;  border-right: 0;  }  .tox-editor-header {  background-color: $gray-subtle !important;  }  .tox-toolbar__primary {  background-color: $gray-subtle !important;  border-bottom: 1px solid $gray-light !important;  background: $gray-subtle !important;  }  .mce-content-body gt; p {  font-family: "Roboto" !important;  }  button {  .tox-icon {  svg {  fill: $gray-dark;  }  i {  font-size: 1.5rem;  }  }  amp;:focus {  svg {  fill: $gray-dark;  }  }  }  } lt;/stylegt;