Webpack 邮政编码为8的盖茨比-尝试导入错误:';css';不包含默认导出(作为样式导入)
我有一个《盖茨比与理智》网站,它基于一个启动项目。到目前为止,一切都很顺利,但我今天在package.json文件中更新了我的所有包和插件,以消除所有npm警告。这包括更新到Gatsby 3.0.3和postsss 8(我现在也在使用Gatsby插件postsss 4.0.0) 我设法解决了一些初始错误,但现在我遇到了一个问题,它无法识别我的CSS模块。我得到每个组件文件的错误: 尝试导入错误:“[componentName].module.css”不包含默认导出(作为“样式”导入) 当我在react组件中导入css文件时Webpack 邮政编码为8的盖茨比-尝试导入错误:';css';不包含默认导出(作为样式导入),webpack,gatsby,netlify,postcss,css-modules,Webpack,Gatsby,Netlify,Postcss,Css Modules,我有一个《盖茨比与理智》网站,它基于一个启动项目。到目前为止,一切都很顺利,但我今天在package.json文件中更新了我的所有包和插件,以消除所有npm警告。这包括更新到Gatsby 3.0.3和postsss 8(我现在也在使用Gatsby插件postsss 4.0.0) 我设法解决了一些初始错误,但现在我遇到了一个问题,它无法识别我的CSS模块。我得到每个组件文件的错误: 尝试导入错误:“[componentName].module.css”不包含默认导出(作为“样式”导入) 当我在re
import styles from './[componentName].module.css'
styles对象返回undefined。我是否需要降级到这些软件包的旧版本
这是我的package.json:
"dependencies": {
"@cloudflare/wrangler": "^1.15.0",
"@fontsource/montserrat": "^4.2.2",
"@fontsource/raleway": "^4.2.2",
"@sanity/block-content-to-react": "^2.0.7",
"@sanity/client": "^2.2.6",
"@sanity/image-url": "^0.140.22",
"date-fns": "^2.19.0",
"dotenv": "^8.2.0",
"gatsby": "^3.0.3",
"gatsby-plugin-anchor-links": "^1.2.1",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"gatsby-source-sanity": "^6.0.5",
"get-youtube-id": "^1.0.1",
"postcss-import": "^14.0.0",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.1",
"react-autosize-textarea": "^7.1.0",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.15.4",
"react-icons": "^4.2.0",
"react-script": "^2.0.5",
"react-youtube": "^7.13.1"
},
"devDependencies": {
"eslint": "^7.21.0",
"eslint-config-standard": "^16.0.2",
"eslint-config-standard-react": "^11.0.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-standard": "^4.1.0",
"gatsby-plugin-postcss": "^4.0.0",
"postcss": "^8.2.7",
"prettier-eslint-cli": "^5.0.1",
"prop-types": "^15.7.2"
}
在盖茨比
v3
中,您需要将模块导入为:
import * from './[componentName].module.css'
就你而言:
import * as styles from './[componentName].module.css'
请记住,一次导入所有样式将不允许webpack树化您的样式。首选方法是单独导入模块,如:
import { style1, style2 } from './mystyles.module.css
您可以在本文中跟踪讨论的堆栈跟踪。这不是一个bug,它按预期工作:谢谢,@LekoArts,没有意识到!