从 Create-React-App 升级到 Next.js - CSS 样式表不起作用答案

【问题标题】：Upgrading From Create-React-App to Next.js - CSS stylesheets are not working从 Create-React-App 升级到 Next.js - CSS 样式表不起作用
【发布时间】：2019-04-24 14:09:58
【问题描述】：

最近我们发现我们的 React 项目必须使用 SSR。我已经检查了我知道的所有方法，并且几乎测试了我在媒体和其他网站上找到的所有方法。经过大量的工作，我决定我们必须迁移到 Next JS。

虽然迁移一切都很好，但对于样式表。

在我们的应用程序的旧版本中，我们使用 webpack 将我们的样式与项目捆绑在一起，一切都很好。

这是 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const port = process.env.PORT || 3000;
const extractSCSS = new ExtractTextPlugin('./[name].css');

// const UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {

  mode: 'development',
  output: {
    filename: 'bundle.[hash].js',
    publicPath: '/'
  },
  devtool: 'source-map',
  module: {
    rules: [

      // First Rule

      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],

      },

      // Second Rule

      {
        test: /\.scss$/,
        use: ['css-hot-loader'].concat(extractSCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader?sourceMap',
              options: { alias: { '../img': '../public/img' }, sourceMap: true }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        }))
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },

        {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [

    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'

    }),


    extractSCSS,

  ],
  devServer: {
    host: 'localhost',
    port: port,
    historyApiFallback: true,
    open: true
  }
};

迁移应用后，我的 next.config.js 如下所示：

// next.config.js
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')

module.exports = withCSS( withSass(
  {
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000
          }
        }
      },
      )

      return config
    },

  }
))

问题是一切都正确呈现，但其中没有样式表，也不包含任何样式。有没有人可以帮我解决这个问题？

【问题讨论】：

请查看文档的使用部分以获取next-sass

标签： reactjs create-react-app next.js server-side-rendering

【解决方案1】：

仅仅使用来自 node_modules 的 CSS 你不需要这个花哨的配置。

三个简单的步骤：

安装 next-css 插件：

npm install --save @zeit/next-css

在根目录下创建 next.config.js，内容如下：

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

现在您应该可以像这样从 node_modules 导入样式表了：

import 'bootstrap-css-only/css/bootstrap.min.css';

注意：使用 Next v 8+

背景： 我花了几个小时试图简单地导入作为 node_module 安装的 CSS，各种解决方案大多是 hacky 解决方法，但如上所示，有一个简单的解决方案。它由一位核心团队成员提供：https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

【讨论】：

【解决方案2】：

这不是一个真正的答案，但 Next.js 中的 CSS 简直糟透了！我发现自己一直在努力让它发挥作用，所以我决定遵循他们的文档并简单地使用：

const App = () => {
  return (
    {style}
    <div/>
  );
}

let style = (<style jsx>
{`
.someClass {}
`}
</style> )

export default App;

这样您就可以像在普通 HTML 中一样拥有 CSS，而无需任何外部导入

source

【讨论】：

不幸的是，我们无法将经典的 className 用法转换为样式化的 Jsx，我认为将所有组件样式更改为那样太难了，我们的 html 设计师会杀了我 ;-)
@AliHk 我听到了。我也有一个项目，它不可能像那样转换它的 css。我希望我知道一个更好的方法。您可能会在他们的回购问题中得到更好的答案。我会试试的

【解决方案3】：

您不需要同时使用 withCSS 和 withSass 插件。

如果您使用的是 Sass，withSass 插件会将其编译为 CSS。

只需确保在 Head 组件内的 _document.js 文件中添加 CSS 文件的路径，如下所示：

<Head>
  <link rel="stylesheet" href="/_next/static/style.css" />
</Head>

【讨论】：

我认为我需要它们两个，因为我们将 scss 用于我们实现的样式，并将 css 用于需要自己的 css 样式的库。
当我从 next.config.js 中删除 withCSS 时，它会在重建后返回 ./node_modules/leaflet/dist/leaflet.css 模块解析失败：意外令牌 (3:0) 您可能需要适当的loader 来处理这个文件类型。
您可以将库的 CSS 复制/粘贴到新的 SCSS 文件（例如：_leaflet.scss）中，然后像任何其他 .scss 文件一样导入它。 SCSS 只是“增压”的 CSS。

【解决方案4】：

为了导入 css，你可以使用 nextJS 的 Head 组件。

import Head from 'next/head';
<Head>
    <link rel="stylesheet" href="path of the css" />
</Head>

【讨论】：