尝试导入错误：“样式”未从“./styles.scss”导出（导入为“样式”）答案

【问题标题】：Attempted import error: 'styles' is not exported from './styles.scss' (imported as 'styles')尝试导入错误：“样式”未从“./styles.scss”导出（导入为“样式”）
【发布时间】：2022-01-21 02:45:49
【问题描述】：

伙计们

我正在尝试构建我的 react 项目，但它一直在说

'Attempted import error: 'styles' is not exported from './styles.module.scss' (imported as 'styles').'

所以，我想我的 webpack 配置文件中的设置有误，但不知道其中有什么问题。我正在使用 css 模块，所以尝试过这种方式https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules，但对我不起作用。

这是我使用样式的源文件之一

import styles from "./styles.scss";
import { withRouter } from "react-router";

const ArrowBack = ({ history, onClick }) => {
    return (
        <button type="button" onClick={onClick || history.goBack} className={styles.arrowBack}>
            <span className={styles.bar}></span>
        </button>
    );
};

export default withRouter(ArrowBack);

这是我的文件

webpack 配置 https://gist.github.com/bbatta38/45695862bdde7928b788420793c006b6
包json https://gist.github.com/bbatta38/4b91a2b84aaa237b54277b78525f8473
构建js https://gist.github.com/bbatta38/e18792375a107afcfedfeba48bc3fe1e

已经用了两天时间来找出让它发挥作用的任何方法。如果您有任何解决此错误的想法，请帮助我。

【问题讨论】：

错误提到'./styles.module.scss'但在你的代码中你正在导入“./styles.scss”你可以尝试的事情： - 导入css文件的方式与你的相同scss 文件（看起来你已经导入并安装了 sass-loader，所以我认为这不会有什么不同） - 确保你的 sass 模块被命名为 .module.scss 并在 JS 文件中导入 - 确保你'正在作为默认的“导入样式”导入，而不是作为命名导出“导入 {styles}” - 阅读 React 应用程序中 CSS 模块的文档：create-react-app.dev/docs/adding-a-css-modules-stylesheet
非常感谢，你拯救了我的一天。我没有注意到我写了它'.module。'其中一个文件和所有样式的文件就是“styles.scss”。我认为它一定是 webpack 配置文件中的东西，因为我正在升级 webpack 并响应 etc 的版本，所以我认为这个错误来自版本冲突。再次感谢，它构建得很好。

标签： css reactjs sass css-modules

【解决方案1】：

试试

import styles from "./styles.module.scss";

您似乎缺少文件名中的“模块”。

【讨论】：

感谢您在上面的评论中发现了这个错误。
很棒的@bbatta，如果它解决了你的问题，你可以接受这个作为答案。

【解决方案2】：

从 Gatsby v3 开始，您需要像这样导入样式：

import * as styles from './styles.module.scss'

【讨论】：

你能分享你的 gatsby ocnfig 文件吗？
对不起，我没有使用 Gatsby
那么为什么要提供 gatsby 文档 gatsbyjs.com/docs/reference/release-notes/…
你的项目在github上有链接吗？
只是让你们知道我已尽我所能，很抱歉造成混淆。而且项目是私有的，你可能看不到，这是公司一。