将 Storybook/vue 与 SCSS 一起使用

Posted 2023-02-19

【中文标题】将 Storybook/vue 与 SCSS 一起使用

【英文标题】：Using Storybook/vue with 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 加载器。

谢谢，我之前试过了，但没用，但更新了原帖以显示我的步骤

【参考方案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