在 SCSS 中使用 Storybook/vue

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>标签，错误就会消失。

我已按照此处的文档添加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

添加const path = require('path');以.storybook/main.js解决我的问题

Answer 2

对于我的情况，我使用vue-cli所有默认值来创建项目。当我尝试lang="scss"在 vue 组件style标签中添加后，它给了我错误。

根据检查项目的 Webpack 配置，作为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