Build tools

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

• Build tools

  • 1. Using Gulp

  • 2. Using Webpack

  • 3. Using Laravel Mix

¶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/*.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/main.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.sass('resources/sass/*.scss', 'public/css',  {
  sassOptions: {
    includePaths: ['node_modules'],
  }
});