I have a Vue application created with Vue Cli and I'm trying to put sass support inside my storybook but I'm receiving this error when I run the storybook:
ERROR in ./src/components/atoms/TinyMCE/TinyMCE.vue?vue&type=style&index=0&id=4762223c&scoped=true&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?vue&type=style&index=0&id=4762223c&scoped=true&lang=scss)
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (C:\trabalho\repositories\mb-redesign-front\node_modules\style-loader\dist\index.js:19:24)
My main.js file of storybook is configurated with webpackFinal according the docs of storybook:
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 }) => {
// `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;
},
};
This is my package.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:
<style scoped lang="scss">
.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 > p {
font-family: "Roboto" !important;
}
button {
.tox-icon {
svg {
fill: $gray-dark;
}
i {
font-size: 1.5rem;
}
}
&:focus {
svg {
fill: $gray-dark;
}
}
}
}
</style>