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 是现在要走的路。

【问题讨论】：

标签： javascript reactjs sass storybook sass-loader

【解决方案1】：

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

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

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

【讨论】：