0

我想尝试一下Linaria（使用next-linaria），但我目前坚持让它在我的任何 Next.js 项目（顺便也使用 Typescript）中工作。

万恶之源似乎是 Next.js 默认支持的路径别名。

tsconfig.json

  ...
  "compilerOptions": {
    ...
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },

刚安装 Linaria 和 next-linaria 时，出现如下错误：

Error: Can't resolve '~/layout/main/MainWrapper' in '[...]\src\layout\main'

我已经知道Linaria 声明不支持除@babel-plugin-module-resolver或 webpack 之外的任何其他模块别名。但是，我无法让其中任何一个工作。

我尝试了 @babel-plugin-module-resolver 并将相同的路径配置（和其他一些尝试）放入 .babelrc，但没有成功。

  "plugins": [
    ["module-resolver", {
      "alias": {
        "~/*": [
          "src/*"
        ]
      }
    }]
  ]

我也尝试对 webpack 别名做同样的事情。

next.config.js

module.exports = withLinaria({
  webpack: (config, { dev }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "~/": path.resolve(__dirname, "./src/"),
    };
    return config;
  },
});

Next.js 的默认项目结构如下所示：

/
/pages (contains entry points for each route)
/src (contains regular react components)

所以，我很想问是否有人可以告诉我们如何在 Next + Linaria 中使用路径别名。

4

0 回答 0