Next.js - React SSR在服务器上呈现时找不到模块'./page.scss'（保存文件后客户端渲染工作正常）
[英]Next.js - React SSR Cannot find module './page.scss' when rendering on the server (client side rendered works fine after saving the file)
问题描述
When you're using the create-react-app package you're able to have .scss -files compiled into .css -files as you type in them. 
当你使用create-react-app包你能有.scss -files编译成.css ，你在其中键入-files。 You can then do import './Header.css'; 然后你可以import './Header.css'; in your React component files and the styles are applied. 在您的React组件文件中并应用样式。 It's easy to use your dev-tools and see where the styles are coming from. 使用您的开发工具很容易，看看样式的来源。
Next.js tried to get everyone to use Styled-JSX to have your stylesheets inline inside your JSX files, similar to how web components (or Polymer) do it. Next.js试图让每个人都使用Styled-JSX将样式表内联到JSX文件中，类似于Web组件（或Polymer）的工作方式。 I personally strongly dislike that approach. 我个人非常不喜欢这种做法。
Other problems: 其他问题：
- Styled-JSX isn't supported in my IDE (Webstorm) (even the work-around looks awful); 我的IDE（Webstorm）不支持Styled-JSX（即使解决方案看起来很糟糕）;
- Styled-JSX isn't supported in my dev-tools (Chrome) - there is no reference to what line the style is defined at; 我的dev-tools（Chrome）不支持Styled-JSX - 没有提到样式定义的行;
- It makes my source code look like a garbled mess; 它使我的源代码看起来像乱码;
- How do I include 3rd party CSS solutions with Styled-JSX? 如何在Styled-JSX中包含第三方CSS解决方案？ Am I now supposed to add a
<link>to my<head>?我现在应该在<head>添加<link><head>吗？ For everything external?对于外部的一切？ How is that optimal usage of bandwidth? 带宽的最佳使用情况如何？ Referencing to files inside of node_modulesfeels awkward and bad, too.引用node_modules内部的文件node_modules感觉很尴尬和不好。
So, just add rules to next.config.js , right? 那么，只需将规则添加到next.config.js ，对吧？
module.exports = {
webpack: (config, { dev }) => {
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: "style-loader!css-loader"
}
);
return config
}
};
And then just import './Page.scss'; 然后只需import './Page.scss'; (Don't worry, it's valid CSS, not even SASS yet, I know I did not include the sass-loader here just yet. I try to keep it simple first.) （别担心，它是有效的CSS，甚至不是SASS，我知道我还没有在这里包含sass-loader。我首先尝试保持简单。）
- Refresh the page (Server Side Rendered): does NOT work; 刷新页面（服务器端渲染）：不起作用;
- Save the file (dynamically loaded after saving the file): it does work (until you reload the page); 保存文件（保存文件后动态加载）：它确实有效（直到你重新加载页面）;
- Keeps complaining the file can't be found , plenty of Google hits there, too. 一直抱怨文件无法找到 ，谷歌也有很多人点击。 No real solutions that work today. 没有现实的解决方案。
So, why doesn't it work with SSR? 那么，为什么它不适用于SSR？
1 个解决方案
解决方案1
0 2018-02-05 17:28:47
Note that v5 of next.js will support CSS/Sass/Less almost out of the box : 需要注意的是next.js的V5将支持CSS /无礼/减少近开箱 ：
For importing .css .scss or .less we've created modules which have sane defaults for server side rendering.
Until then, the following set of rules worked for me (assuming the .sass files are in /styles dir): 在此之前，以下一套规则适用于我（假设.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), [])
}
}
]
}
)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.