After creating a project with vue create and installing Storybook, everything was running smoothly. However, as soon as I added SCSS to one of the components, I encountered the following error:
Module parse failed: Unexpected token (14:0)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .test {
| background: red !important;
| }
This is what the component code looks like:
<template>
<h1 class="test">Hello</h1>
</template>
<script>
export default {
name: "Test",
props: {
msg: String
},
}
</script>
<style lang="scss" scoped>
.test {
background: red !important;
}
</style>
If I remove the <style> tag, the error disappears.
I tried adding SCSS support to my Storybook configuration based on the documentation by modifying .storybook/main.js with the following settings:
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
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;
},
};
However, this resulted in a new error when trying to run Storybook:
Daniels-MBP-2-597b:scss-loader-example dcaine$ npm run storybook
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5f4f5f5f0140434d48495e0149544d415c40496c1c021d021c">[email protected]</a> storybook /Users/dcaine/Documents/webdev/test/scss-loader-example
> start-storybook -p 6006
info @storybook/vue v5.3.17
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
ERR! ReferenceError: path is not defined
ERR! at Object.webpackFinal (/Users/dcaine/Documents/webdev/test/scss-loader-example/.storybook/main.js:13:16)
ERR! at accumulationPromise.then.newConfig (/Users/dcaine/Documents/webdev/test/scss-loader-example/node_modules/@storybook/core/dist/server/presets.js:261:72)
ERR! at <anonymous>
ERR! { ReferenceError: path is not defined
ERR! at Object.webpackFinal (/Users/dcaine/Documents/webdev/test/scss-loader-example/.storybook/main.js:13:16)
ERR! at accumulationPromise.then.newConfig (/Users/dcaine/Documents/webdev/test/scss-loader-example/node_modules/@storybook/core/dist/server/presets.js:261:72)
ERR! at <anonymous>
ERR! stack: 'ReferenceError: path is not defined\n at Object.webpackFinal (/Users/dcaine/Documents/webdev/test/scss-loader-example/.storybook/main.js:13:16)\n at accumulationPromise.then.newConfig (/Users/dcaine/Documents/webdev/test/scss-loader-example/node_modules/@storybook/core/dist/server/presets.js:261:72)\n at <anonymous>' }
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.