将 Storybook/vue 与 SCSS 一起使用答案

【问题标题】：Using Storybook/vue with SCSS将 Storybook/vue 与 SCSS 一起使用
【发布时间】：2020-06-27 10:54:42
【问题描述】：

我使用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 为.storybook/main.js 添加了sass 支持，但是当我将配置更改为以下内容时：

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.

【问题讨论】：

不知道故事书，但我猜它与 webpack 捆绑在一起。也许看看那个并添加 scss 加载器。
谢谢，我之前试过了，但没用，但更新了原帖以显示我的步骤

标签： javascript css vue.js sass storybook

【解决方案1】：

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

【讨论】：

这也解决了我的问题。

【解决方案2】：

在我的情况下，我使用 vue-cli 和所有默认设置来创建项目。在我尝试添加 lang="scss"within vue 组件 styletag 后，它给了我错误。

根据Inspecting the Project's Webpack Config，作为 vue-cli "abstracts away" 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

【讨论】：