UIkit: Modular import

my-app.js

import Icons from 'uikit/dist/js/uikit-icons';
import UIkit from 'my-uikit';

UIkit.use(Icons);

my-uikit-core.js

import UIkit from 'uikit/src/js/api/index';
import mixin from 'uikit/src/js/mixin/index';
import core from 'uikit/src/js/core/index';

mixin(UIkit);
core(UIkit);

export default UIkit;

my-uikit.js

import boot from 'uikit/src/js/api/boot';
import Countdown from 'uikit/src/js/components/countdown';
import GridParallax from 'uikit/src/js/components/grid-parallax';
import Lightbox from 'uikit/src/js/components/lightbox';
import Notification from 'uikit/src/js/components/notification';
import Parallax from 'uikit/src/js/components/parallax';
import Slideshow from 'uikit/src/js/components/slideshow';
import Sortable from 'uikit/src/js/components/sortable';
import Tooltip from 'uikit/src/js/components/tooltip';
import Upload from 'uikit/src/js/components/upload';
import UIkit from 'my-uikit-core';

UIkit.use(Countdown);
UIkit.use(GridParallax);
UIkit.use(Lightbox);
UIkit.use(Notification);
UIkit.use(Parallax);
UIkit.use(Slideshow);
UIkit.use(Sortable);
UIkit.use(Tooltip);
UIkit.use(Upload);

boot(UIkit);

export default UIkit;

webpack.config.js

const path            = require('path');
const Encore          = require('@symfony/webpack-encore');
const CopyPlugin      = require('copy-webpack-plugin');
const ImageminPlugin  = require('imagemin-webpack-plugin').default;
const StyleLintPlugin = require('stylelint-webpack-plugin');

const paths = {
  output: path.resolve(__dirname, './web/build'),
  public: '/build',
  resources: path.resolve(__dirname, './assets'),
  vendor: path.resolve(__dirname, './node_modules')
};

Encore
// Set output and public paths
  .setOutputPath(paths.output)
  .setPublicPath(paths.public)

  // Clean output before build
  .cleanupOutputBeforeBuild()

  // Javascript
  .autoProvideVariables({
    UIkit: 'uikit',
    'window.UIkit': 'uikit'
  })
  .addEntry('js/app', `${paths.resources}/js/main.js`)
  .addLoader({
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'eslint-loader'
  })
  .configureBabel(function (babelConfig) {
    babelConfig.presets.push(['env', {
      modules: false,
      targets: {
        browsers: [
          'last 2 versions',
          'ios >= 9.1',
          'Safari >= 9.1',
          'not ie <= 10'
        ]
      },
      useBuiltIns: true
    }]);
  })

  // CSS
  .addStyleEntry('css/global', `${paths.resources}/scss/global.scss`)
  .addStyleEntry('css/email', `${paths.resources}/scss/email.scss`)
  .addStyleEntry('css/editmode', `${paths.resources}/scss/editmode.scss`)
  .enableSassLoader(function (options) {
    options.includePaths = [
      `${paths.vendor}/uikit/src/scss`,
      `${paths.vendor}/foundation-emails/scss`
    ]
  }, { resolveUrlLoader: false })
  .enablePostCssLoader()
  .addPlugin(new StyleLintPlugin())

  // Copy and optimize images
  .addPlugin(new CopyPlugin([{
    from: `${paths.resources}/images`,
    to: `${paths.output}/images`
  }], {
    ignore: [
      'favicon.png',
      '.dummy'
    ]
  }))
  .addPlugin(new ImageminPlugin({
    disable: !Encore.isProduction(),
    test: /\.(jpe?g|png|gif|svg)$/i
  }))

  // Source maps and cache buster
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
;

// Advanced webpack config
let webpackConfig = Encore.getWebpackConfig();

webpackConfig.watchOptions = { ignored: `${paths.vendor}/` };
webpackConfig.resolve.extensions.push('json');

module.exports = webpackConfig;

Hi, Aaron.
In order to import JS module from uikit, you should I follow those steps.
I mean creating all those files or could be enough just creating third one?
I'm trying to create the UI layout for a personal project and I don't want to import the whole uikit js cause it's kind of heavy.
I will appreciate your answer.
Dankeschön!

@AlejandroBryan This is just an example of how to use UIkit modularly. You can use it like that or do something similar. You could even go as far and create another separate file for the core components (like grid, margin, toggle, etc.).

Hi, Aaron, thanks.
Unfortunately I cannot see the structure of the directories.

Is that right?

web

• node_modules/

• build

  • js/app/
  • css/
  • images/

• assets

  • js/main.js
  • scss/
  • images/

Liebe Grüße aus Wien

@cemfirat My folder structure is as follows:

assets/

• js/app.js
• scss/
• images/

node_modules/

web/

• build/
  • js/
  • css/
  • images/

something

Dankeschön Aaron.
Es war mir sehr schwer die ganze JavaScript aufzurufen.
Danke noch einmal für deine Hilfe.

// CSS .addStyleEntry('css/global', ${paths.resources}/scss/global.scss) .enableSassLoader(function (options) { options.includePaths = [ ${paths.vendor}/uikit/src/scss ] }, { resolveUrlLoader: false }) .enablePostCssLoader() .addPlugin(new StyleLintPlugin())

error in ./assets/scss/global.scss 14:12:32

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'includePaths'. These properties are valid: