Storybook React SassError：预期的“”

Posted 2023-02-22

【中文标题】Storybook React SassError：预期的“”

【英文标题】：Storybook React SassError: expected ""Storybook React SassError：预期的“”

【发布时间】：2021-07-12 09:01:49

【问题描述】：

尝试使用.scss 文件设置故事书。

关注doc >

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = 
  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;
  ,
;

给我这个错误：SassError: expected "".

找到的所有解决方案似乎都已过时，并且看起来 react-script "style-loaded" 包可能存在某种问题？

我猜styled-component 是现在要走的路。

【参考方案1】：

我遇到了同样的问题。在我的情况下，由于我的项目使用的 Webpack 版本与 Stylebook 用于构建问题的 Webpack 版本之间未对齐而引发错误。

我修复了安装使用 Webpack5 的 Storybook：https://storybook.js.org/blog/storybook-for-webpack-5/

如果需要，使用 css-modules 的另一个可能的解决方法是重命名 *.module.scss 中的文件，并且样式书中有一个内置规则将其编译为模块。