Ind*_*gns 22 css import sass reactjs next.js
我的 React 应用程序运行良好，也使用全局 CSS。
我跑了npm i next-images，添加了一张图片，编辑了next.config.js, ran npm run dev，现在我收到了这条消息
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
我已经检查了文档，但我发现这些说明有点令人困惑，因为我是 React 的新手。
另外，为什么现在会发生这个错误？你认为这与 npm install 有什么关系吗？
我试图删除我与他们的代码一起添加的新文件，但这并不能解决问题。我也尝试过阅读更多：建议的内容。
我的最高层组件。
import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';
const Layout = (props) => (
<div>
<Head>
<title>Bitcoin Watcher</title>
</Head>
<Navbar />
<div className="marginsContainer">
{props.children}
</div>
</div>
);
export default Layout;
我的 next.config.js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssModules: true
})
我的 main.scss 文件
@import './fonts.scss';
@import './variables.scss';
@import './global.scss';
我的 global.scss
body {
margin: 0;
}
:global {
.marginsContainer {
width: 90%;
margin: auto;
}
}
我觉得最奇怪的是这个错误没有改变任何与 CSS 或 Layout.js 相关的东西，而且它以前是有效的？
我已将 main.scss 导入移至 pages/_app.js 页面，但样式仍未通过。这是 _app.js 页面的样子
import '../global-styles/main.scss'
export default function MyApp({ Component, props }) {
return <Component {...props} />
}
Nik*_*lev 31
使用内置 Next.js CSS 加载器（参见此处）而不是 legacy @zeit/next-sass。
@zeit/next-sass用包sass。next.config.js。或者不要更改其中的 CSS 加载。由于 Next.js 9.2 全局 CSS 必须在自定义<App>组件中导入。
// pages/_app.js
import '../global-styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
要仅向特定组件或页面添加样式，您可以使用CSS 模块的内置支持。（见这里）
例如，如果您有一个组件，Button.js您可以创建一个 Sass 文件button.module.scss并将其包含在组件中。
Dan*_*cki 20
Next.jsmodule当您的文件具有命名功能时，请停止抱怨，例如，更改import '../global-styles/main.scss';为import '../global-styles/main.module.scss';将修复警告，并且您可以将样式放在global-styles，或者例如，在您的component.
不需要额外的依赖项/配置next.config.js。
您可以用您自己的加载器替换固执己见（并且过于复杂？）的 NextJs CSS 加载器。这是一个简单的全局 css ：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
reactStrictMode: true,
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Find and remove NextJS css rules.
const cssRulesIdx = config.module.rules.findIndex(r => r.oneOf)
if (cssRulesIdx === -1) {
throw new Error('Could not find NextJS CSS rule to overwrite.')
}
config.module.rules.splice(cssRulesIdx, 1)
// Add a simpler rule for global css anywhere.
config.plugins.push(
new MiniCssExtractPlugin({
experimentalUseImportModule: true,
filename: 'static/css/[contenthash].css',
chunkFilename: 'static/css/[contenthash].css',
})
)
config.module.rules.push({
test: /\.css$/i,
use: !isServer ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'],
})
return config
},
}
| 归档时间： |
|
| 查看次数： |
45029 次 |
| 最近记录： |