故事书 React SassError：预期为“{”

Question

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

遵循文档>

// .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 "{".

找到的所有解决方案似乎都已过时，并且看起来反应脚本“样式加载”包可能存在问题？

我想styled-component这是现​​在要走的路。

Answer 1

我有同样的问题。在我的例子中，抛出错误是因为我的项目使用的 Webpack 版本与 Stylebook 用于构建问题的 Webpack 版本之间不一致。

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

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