Webpack integration
Integration example for the Webpack can be found in
integrations examples repository
.
How to integrate the Stylify into the Webpack
First install the @stylify/unplugin package using NPM or Yarn:
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
Next, add the following configuration into the webpack.config.js
file:
const path = require('path');
const { webpackPlugin } = require('@stylify/unplugin');
const mode = 'development';
const stylifyPlugin = webpackPlugin({
transformIncludeFilter: (id) => id.endsWith('html'),
bundles: [{
outputFile: './index.css',
files: ['./index.html'],
rewriteSelectorsInFiles: mode === 'production'
}]
});
module.exports = {
entry: './input.js',
mode: mode,
plugins: [ stylifyPlugin ],
module: {
rules: [{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"]
}],
},
output: {
path: path.resolve(__dirname),
filename: 'index.js',
libraryTarget: 'umd'
}
};
Now add the generated index.css
file into the index.js
entry file.
Where to go next?
- 🚀 Learn how to get started
- 🔌 Checkout @stylify/unplugin configuration
- ⚙️ Or configure Stylify right away: