Hi,
i just wanted to install tailwindcss over node. How do i do that to use it in a resource? What i have tried already:
- Added the dependencies into the fxmanifest
- create the node_modules and added the packages to it.
- added a package.json:
{
"scripts": {
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"mini-css-extract-plugin": "0.9.0",
"postcss-loader": "^7.0.2",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}
- added the webpack.config.js
// Webpack uses this to work with directories
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
// Path to your entry point. From this file Webpack will begin its work
entry: './src/javascript/index.js',
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
],
rules: [
{
test: /\.js$/,
/* ... */
},
{
// Apply rule for .sass, .scss or .css files
test: /\.(sa|sc|c)ss$/,
// Set loaders to transform files.
// Loaders are applying from right to left(!)
// The first loader will be applied after others
use: [
{
// After all CSS loaders, we use a plugin to do its work.
// It gets all transformed CSS and extracts it into separate
// single bundled file
loader: MiniCssExtractPlugin.loader
},
{
// This loader resolves url() and @imports inside CSS
loader: "css-loader",
},
{
// Then we apply postCSS fixes like autoprefixer and minifying
loader: "postcss-loader"
},
{
// First we transform SASS to standard CSS
loader: "sass-loader",
options: {
implementation: require("sass")
}
}
]
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
],
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript
// minifying and other things, so let's set mode to development
mode: 'development'
};
But i don’t know how to get it ready…