SassError：SassError：预期为“{”。在故事书里

Question

我正在尝试使用 Storybook 来处理我的组件。我的组件使用 SASS 进行样式设置，但是当我启动故事书时，出现此错误：

\n

SassError: SassError: expected "{".\n  \xe2\x95\xb7\n2 \xe2\x94\x82 var content = require("!!../../../node_modules/css-loader/dist/cjs.js?modules&importLoaders!../../../node_modules/sass-loader/dist/cjs.js!./fileUpload.scss");\n  \xe2\x94\x82                                                                                                                                                              ^\n  \xe2\x95\xb5\n

\n

我的fileUpload.scss文件看起来非常良性。这是非常普通的 SCSS/CSS ：

\n

nav {\n  .file-upload-modal {\n    min-width: 900px;\n  }\n\n  .file-upload-content {\n    min-width: 500px;\n  }\n}\n

\n

这个 SassError 错误试图告诉我什么？

\n

我的故事书main.js如下所示：

\n

module.exports = {\n  "stories": [\n    "../src/**/*.stories.mdx",\n    "../src/**/*.stories.@(js|jsx|ts|tsx)"\n  ],\n  "addons": [\n    "@storybook/addon-links",\n    "@storybook/addon-essentials",\n    "@storybook/preset-create-react-app",\n    // "@storybook/preset-scss",\n  ],\n  "framework": "@storybook/react",\n\n\n  webpackFinal: async (config, { configType }) => {\n    // add SCSS support for CSS Modules\n    config.module.rules.push({\n      test: /\\.scss$/,\n      use: ['style-loader', 'css-loader', 'sass-loader'],\n      include: path.resolve(__dirname, '../'),\n    });\n    return config;\n  },\n}\n

\n

（我尝试安装@storybook/preset-scss，但打字稿和反应发生了各种对等依赖崩溃。）

\n

Answer 1

这真的很奇怪，但我所做的只是删除了 main.js 中的“webpackFinal”部分。

//main.js

module.exports = {
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/preset-create-react-app",
    ],
};

我现在的想法是，预设创建反应应用程序可能与我在 webpackfinal 中定义的内容相冲突。

嗯...不太满意，但至少现在对我有用。