I've created a project using vue create
and then installed Storybook. It is running fine, except when I add scss to the component I get 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;
| }
Here's what my component 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 will go.
I have followed the documentation here for adding sass
support to .storybook/main.js
but when I change my config to the following:
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;
},
};
I get a new error:
Daniels-MBP-2-597b:scss-loader-example dcaine$ npm run storybook
> [email protected] 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.
Adding const path = require('path');
to .storybook/main.js
solved my issue
Inside .storybook/main.js
:
const path = require('path');
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;
},
};
For my case i used vue-cli
with everything default to create the project. After i tried adding lang="scss"
within vue component style
tag 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With