Build tools

Automate painful or time-consuming tasks in your development workflow, so you can stop messing around and build faster.


Build tools

We've included some basic examples of setting up your CSS with common build tools below. For more examples, you can check out our integration guides which will show you how to install Webpixels' CSS in other frameworks as well.

1. Using Gulp

Make sure you install and use the required gulp plugins: gulp-autoprefixer and gulp-sass and the sass compiler which will allow you to use the primary implementation of Sass.

With minimal setup, your gulp file should include this rule or similar:

// Load dependencies
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const sass = require('gulp-sass');
sass.compiler = require('sass');

// Tasks
var css = function(done) {
    return gulp.src('./src/app.scss')
    .pipe(sass({
        includePaths: ['node_modules']
    }).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest('./dist'));
	done()
};

exports.default = gulp.series(css);

2. Using Webpack

Before configuring Webpack, make sure you have the sass module installed which includes Dart Sass - the primary implementation of Sass.

Make sure you install and use the required loaders: sass, sass-loader, postcss-loader with Autoprefixer.

With minimal setup, your webpack config should include this rule or similar:

module.exports = {
	entry: './src/app.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [{
			test: /\.(scss)$/,
			use: [{
				// inject CSS to page
				loader: 'style-loader'
			}, {
				// translates CSS into CommonJS modules
				loader: 'css-loader'
			}, {
				// Run postcss actions
				loader: 'postcss-loader',
				options: {
					// `postcssOptions` is needed for postcss 8.x;
					// if you use postcss 7.x skip the key
					postcssOptions: {
						// postcss plugins, can be exported to postcss.config.js
						plugins: function() {
							return [
								require('autoprefixer')
							];
						}
					}
				}
			}, {
				// compiles Sass to CSS
				loader: 'sass-loader'
			}]
		}]
	}
};


3. Using Laravel Mix

If you are using Laravel Mix, which is a nice little wrapper built around Webpack, here are the steps of how to setup a simple workflow.

mix.js('resources/js/app.js', 'public/js')
	.sass('resources/sass/app.scss', 'public/css',  {
        sassOptions: {
          	includePaths: ['node_modules'],
        }
    });
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->