gpt4 book ai didi

css - Next.js - React SSR 在服务器上渲染时找不到模块 './page.scss' (保存文件后客户端渲染工作正常)

转载 作者:行者123 更新时间:2023-12-03 13:54:09 26 4
gpt4 key购买 nike

当您使用create-react-app时您可以拥有的软件包 .scss -文件编译成.css - 您输入的文件。然后你可以做import './Header.css';在你的 React 组件文件中并应用样式。使用开发工具并查看样式来自何处很容易。

Next.js 试图让每个人都使用 Styled-JSX 将样式表内联到 JSX 文件中,类似于 Web 组件(或 Polymer)的做法。我个人非常不喜欢这种方法。

其他问题:

  • 我的 IDE (Webstorm) 不支持 Styled-JSX(即使解决方法看起来很糟糕);
  • 我的开发工具 (Chrome) 不支持 Styled-JSX - 没有引用样式定义的行;
  • 它让我的源代码看起来像一团乱码;
  • 如何将第 3 方 CSS 解决方案纳入 Styled-JSX?我现在应该添加 <link>给我的<head> ?对于一切外在的事情?带宽的最佳使用情况如何?引用 node_modules 内的文件也感觉尴尬和糟糕。

所以,只需将规则添加到 next.config.js ,对吗?

module.exports = {
webpack: (config, { dev }) => {
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: "style-loader!css-loader"
}
);
return config
}
};

然后就是import './Page.scss'; (别担心,它是有效的 CSS,甚至还不是 SASS,我知道我还没有在此处包含 sass-loader。我首先尝试保持简单。)

  1. 刷新页面(服务器端渲染):不起作用;
  2. 保存文件(保存文件后动态加载):它确实有效(直到您重新加载页面);
  3. 不断提示file can't be found ,大量的谷歌也在那里点击。目前还没有真正有效的解决方案。

那么,为什么它不能与 SSR 一起使用?

最佳答案

请注意v5 of next.js will support CSS/Sass/Less almost out of the box :

For importing .css .scss or .less we’ve created modules which have sane defaults for server side rendering.

在那之前,以下规则集对我有用(假设 .sass 文件位于 /styles 目录中):

config.module.rules.push(
{
test: /\.(css|sass)/,
loader: 'emit-file-loader',
options: {
// this path is relative to the .next directory
name: 'dist/[path][name].[ext]'
}
},
{
test: /\.css$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader']
},
{
test: /\.sass$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader',
{ loader: 'sass-loader',
options: {
includePaths: ['styles', 'node_modules']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
}
]
}
)

关于css - Next.js - React SSR 在服务器上渲染时找不到模块 './page.scss' (保存文件后客户端渲染工作正常),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46471293/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com