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, 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: