next.js - 我如何将 Linaria 与 NextJS 一起使用？

Question

我想将 Linaria 库（https://github.com/callstack/linaria）与 nextJS 一起使用。现在，我按照文档执行。但是发生了下一个错误。

全局 CSS 不能从您的 Custom 以外的文件导入。请将所有全局 CSS 导入移至 pages/_app.js。阅读更多：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问题。似乎人们通过以下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;
  },
});