我已经使用vue create
创建了一个项目,然后安装了Storybook。它运行正常,除非将scss添加到组件中,但出现以下错误:
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;
| }
这是我的组件的外观:
<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>
如果删除
<style>
标记,错误将消失。我在这里遵循了the documentation,将
sass
支持添加到.storybook/main.js
,但是当我将配置更改为以下内容时: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;
},
};
我收到一个新错误:
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.
最佳答案
将const path = require('path');
添加到.storybook/main.js
解决了我的问题
关于javascript - 在SCSS中使用Storybook/vue,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60704093/