Skip to content

Instantly share code, notes, and snippets.

@aarongerig
Last active October 1, 2023 07:49
Show Gist options
  • Save aarongerig/7e987651ba46f360f7d06e168d76ec3f to your computer and use it in GitHub Desktop.
Save aarongerig/7e987651ba46f360f7d06e168d76ec3f to your computer and use it in GitHub Desktop.
UIkit: Modular import
import Icons from 'uikit/dist/js/uikit-icons';
import UIkit from 'my-uikit';
UIkit.use(Icons);
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;
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;
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;
@AlejandroBryan
Copy link

something

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

@cemfirat
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment