使用SSR React时导入CSS的正确方法？

Question

在SSR React中导入CSS文件的正确方法是什么？

这是我得到的错误：

You may need an appropriate loader to handle this file type.
| .headline {
|   color: red;
| }

我知道它与webpack有关，但是我已经尝试了一些CSS加载器，但无法使其正常工作。

Answer 1

与没有ssr的反应相同。

将加载器（style-loader和css-loader）添加到您的Webpack配置中：

这个用于您自己的.css文件：

     {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      }

这是第三方库.css文件的文件：

      {
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      }

在您的反应文件中，将其导入为：

      import './style.css';

别忘了安装style-loader和css-loader

      yarn add style-loader css-loader -D