logo标签列表

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

cssreactjswebpacksassnext.js
5
当使用 create-react-app 包时，您可以在输入它们时将 .scss 文件编译为 .css 文件。然后在您的 React 组件文件中执行import './Header.css'; 即可应用样式。您可以轻松使用开发工具查看样式来源。
Next.js 尝试让每个人都使用 Styled-JSX，在 JSX 文件内联样式表，类似于 Web 组件（或 Polymer）的做法。但我个人强烈不喜欢这种方式。
其他问题:
  • 我的IDE(Webstorm)不支持Styled-JSX（即使是解决方法看起来也很糟糕）;
  • Styled-JSX在我的开发工具(Chrome)中不受支持 - 没有参考定义样式的行；
  • 它让我的源代码看起来乱七八糟；
  • 如何使用Styled-JSX包含第三方CSS解决方案？我现在是要将<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. 一直在抱怨找不到文件，有很多谷歌搜索结果，但今天没有真正可行的解决方法。
那么，为什么它在SSR中不起作用呢？
1个回答
0
请注意，下一个版本的next.js将几乎支持CSS/Sass/Less：

为了导入.css、.scss或.less文件，我们创建了模块，这些模块在服务器端呈现时具有合理的默认值。

在那之前，以下一组规则对我有效（假设.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), [])
        }
      }
    ]
  }
)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接