Using Stylify CSS with Webpack
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling and etc.
Integration example for the Webpack can be found in
integrations examples repository
.
How to integrate the Stylify CSS 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 { stylifyWebpack } = require('@stylify/unplugin');
const mode = 'development';
const stylifyPlugin = stylifyWebpack({
bundles: [{
outputFile: './index.css',
files: ['./**/*.html'],
rewriteSelectorsInFiles: mode === 'production'
}],
// Optional
// Compiler config info https://stylifycss.com/docs/stylify/compiler#configuration
compiler: {
// https://stylifycss.com/docs/stylify/compiler#variables
variables: {},
// https://stylifycss.com/docs/stylify/compiler#macros
macros: {},
// https://stylifycss.com/docs/stylify/compiler#components
components: {},
// ...
}
});
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
- 🔌 Check out @stylify/unplugin configuration
- ⚙️ Or configure Stylify right away: