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

Question

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

MHD*_*MHD 5 css sass reactjs webpack next.js

当您使用该create-react-app包时，您可以在输入时将.scss-files 编译为-files 。.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
    }
};

Run Code Online (Sandbox Code Playgroud)

然后import './Page.scss';（别担心，它是有效的 CSS，甚至还不是 SASS，我知道我还没有在这里包含 sass-loader。我首先尝试保持简单。）

刷新页面（服务器端渲染）：不起作用；
保存文件（保存文件后动态加载）：它确实有效（直到您重新加载页面）；
一直抱怨找不到文件，谷歌也多次点击那里。目前还没有真正有效的解决方案。

那么，为什么它不能与 SSR 一起使用呢？

Answer 1

ada*_*oro 0

请注意，next.js v5 将支持 CSS/Sass/Less几乎开箱即用：

\n\n

\n
为了导入 .css、.scss 或 .less，我们\xe2\x80\x99 创建了具有合理服务器端渲染默认值的模块。
\n

\n\n

在那之前，以下一组规则对我有用（假设文件.sass位于/styles目录中）：

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	8 年，8 月前
查看次数：	1958 次
最近记录：	8 年，3 月前