How to use vanilla-extract in the ui package in the example application?

[nguyenyou]

Does anyone try to use the vanilla-extract library to build the ui package in the turborepo monorepo example? I love the way we use the next-transpile-modules lib to integrate the ui package into the application and just want to up the game a little bit by trying to add the vanilla-extract library to it...no hope so far 😢

[calebpdx]

You have to follow the webpack installation guide and install a few other packages..both in the ui folder and in the folder you are running next.

You'll want to install the following additional dependencies in both UI and the Next app:
next@latest
react@latest
react-dom@latest
css-loader
mini-css-extract-plugin
@vanilla-extract/webpack-plugin

In your Next App, you will also want to install "@vanilla-extract/babel-plugin" and set the .babelrc as follows:

{ "presets": ["next/babel"], "plugins": ["@vanilla-extract/babel-plugin"] }

Here is my webpack.config.js I used in both folders.

`const {
VanillaExtractPlugin
} = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
plugins: [
new VanillaExtractPlugin(),
new MiniCssExtractPlugin()
],
module: {
rules: [
{
test: /.vanilla.css$/i, // Targets only CSS files generated by vanilla-extract
use: [
MiniCssExtractPlugin.loader,
{
loader: require.resolve('css-loader'),
options: {
url: false // Required as image imports should be handled via JS/TS import statements
}
}
]
}
]
}
};`

This should get you up and running!

[calebpdx]

I'll probably work up a turborepo plugin for the vanilla-extract repo to make things easier and more straightforward!