Last active
October 1, 2023 07:49
-
-
Save aarongerig/7e987651ba46f360f7d06e168d76ec3f to your computer and use it in GitHub Desktop.
UIkit: Modular import
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Icons from 'uikit/dist/js/uikit-icons'; | |
import UIkit from 'my-uikit'; | |
UIkit.use(Icons); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
// 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.