我如何将 Linaria 与 NextJS 一起使用？

Question

我想在 nextJS 中使用 Linaria 库（https://github.com/callstack/linaria）。现在，我按照文档实现了。但是出现了下一个错误。

Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.js. Read more: https://err.sh/next.js/css-global

我理解这个错误。但我想知道。如何将 Linaria 与 NextJS 一起使用？

.babelrc

{
  "presets": ["next/babel", "linaria/babel"],
}

next.config.js

const path = require("path");

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };
    return config;
  },

  webpack: (config) => {
    config.module.rules.push({
      test: /\.tsx$/,
      use: [
        {
          loader: "linaria/loader",
          options: {
            sourceMap: process.env.NODE_ENV !== "production",
          },
        },
      ],
    });

    return config;
  },
};

Answer 1

最近有一篇关于这个主题的 linaria issue。似乎人们通过以下 next.config.js 配置获得了成功：

const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  webpack(config) {
    // retrieve the rule without knowing its order
    const jsLoaderRule = config.module.rules.find(
      (rule) => rule.test instanceof RegExp && rule.test.test('.js')
    );
    const linariaLoader = {
      loader: 'linaria/loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    };
    if (Array.isArray(jsLoaderRule.use)) {
      jsLoaderRule.use.push(linariaLoader);
    } else {
      jsLoaderRule.use = [jsLoaderRule.use, linariaLoader];
    }
    return config;
  },
});

我如何将 Linaria 与 NextJS 一起使用？

How can i use Linaria with NextJS?

next.js

css-in-js