Using Storybook/vue with SCSS Using Storybook/vue with SCSS vue.js vue.js

Using Storybook/vue with SCSS


Adding const path = require('path'); to .storybook/main.js solved my issue


For my case i used vue-cli with everything default to create the project. After i tried adding lang="scss"within vue component styletag it was giving me error.

According to Inspecting the Project's Webpack Config,As vue-cli "abstracts away" webpack config, the webpack.config.js file was in <projectRoot>/node_modules/@vue/cli-service/ for my case.

Now I had to use this config file reference in .storybook/main.js

const custom = require('../node_modules/@vue/cli-service/webpack.config.js');module.exports = {  webpackFinal: (config) => {    return { ...config, module: { ...config.module, rules:     custom.module.rules } };  },};

Reference: https://storybook.js.org/docs/react/configure/webpack#using-your-existing-config