Question

我已经使用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

> scss-loader-example@0.1.0 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.

Answer 1

将select b.name, b.surname from b union all select a.name, a.name from b where not exists (select 1 from b where b.name = a.name);添加到const path = require('path');解决了我的问题

Answer 2

就我而言，我使用 vue-cli 和所有默认设置来创建项目。在我尝试在 vue 组件 lang="scss" 标签中添加 style 后，它给了我错误。

根据Inspecting the Project's Webpack Config，由于 vue-cli “抽象化”了 webpack 配置，webpack.config.js 文件在我的案例中位于 <projectRoot>/node_modules/@vue/cli-service/。

现在我不得不在 .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 } };
  },
};

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

在SCSS中使用Storybook / vue

2 个答案: