I'm excited to start using the Linaria library in my NextJS project. I followed the documentation, but encountered an error.
The error message states: Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.js. For more information, visit:
Although I understand the error, I am curious about how to properly integrate Linaria with 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;
},
};