javascript - 将 Storybook/vue 与 SCSS 一起使用

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

添加 const path = require('path');至.storybook/main.js解决了我的问题
内部 .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;
  },
};