Hope someone can educate me on this.
I have tried this in webpack.mix.js:
[...]
mix
.setPublicPath('./dist')
.browserSync('localhost:7000');
mix
.sass('resources/assets/styles/app.scss', 'styles')
.sass('resources/assets/styles/editor.scss', 'styles')
.purgeCss({
extend: { content: [path.join(__dirname, 'index.php')] },
whitelist: require('purgecss-with-wordpress').whitelist,
whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
});
mix
.js('resources/assets/scripts/app.js', 'scripts').vue()
/* .js('resources/assets/scripts/app.js', 'scripts').vue({version:2}) */
.js('resources/assets/scripts/customizer.js', 'scripts')
.blocks('resources/assets/scripts/editor.js', 'scripts')
.extract();
[...]
Running yarn mix
$ webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
/Users/mekk/Desktop/grefsen-vue/wp-content/themes/sage/node_modules/webpack-cli/bin/cli.js:93
throw err;
^
AssertionError [ERR_ASSERTION]: mix.js() is missing required parameter 1: entry
[...]
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
package.json
{
"private": true,
"browserslist": [
"extends @wordpress/browserslist-config"
],
"engines": {
"node": ">=12.0.0"
},
"scripts": {
"build": "cross-env NODE_ENV=development run-s mix",
"build:production": "cross-env NODE_ENV=production run-s clean mix",
"start": "cross-env NODE_ENV=development run-s \"mix -- --watch\"",
"hot": "cross-env NODE_ENV=development run-s build mix:hot",
"mix": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"mix:hot": "webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"clean": "run-p clean:*",
"clean:dist": "rimraf dist",
"clean:cache": "rimraf storage/framework/cache/*.php storage/framework/cache/data/*.php",
"clean:views": "rimraf storage/framework/views/*.php",
"lint": "run-s -c lint:*",
"lint:scripts": "eslint resources/assets/scripts",
"lint:styles": "stylelint \"resources/assets/**/*.{vue,css,sass,scss,less}\"",
"test": "run-s -c lint",
"translate": "run-s -c translate:*",
"translate:pot": "wp i18n make-pot . ./resources/languages/sage.pot --ignore-domain --include=\"app,resources/assets,resources/views\"",
"translate:js": "wp i18n make-json ./resources/languages --no-purge --pretty-print"
},
"devDependencies": {
"@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
"@wordpress/babel-preset-default": "^4.17.0",
"@wordpress/browserslist-config": "^2.7.0",
"@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
"babel-eslint": "^10.1.0",
"browser-sync": "^2.26.12",
"browser-sync-webpack-plugin": "^2.0.1",
"core-js": "^3.8.1",
"cross-env": "^7.0.2",
"eslint": "^7.7.0",
"eslint-plugin-import": "^2.22.0",
"laravel-mix-copy-watched": "^2.2.4",
"laravel-mix-purgecss": "^5.0.0",
"npm-run-all": "^4.1",
"pug": "^3.0.0",
"pug-plain-loader": "^1.1.0",
"purgecss-with-wordpress": "^2.3.0",
"rimraf": "^3.0.2",
"sass": "^1.26.10",
"sass-loader": "^9.0.3",
"stylelint": "^13.6.1",
"stylelint-config-standard": "^20.0.0",
"vue-loader": "^15.9.5",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"bootstrap": "^4.5.3",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.0",
"popper.js": "^1.16.1",
"vue": "^2.6.12",
"vue-resource": "^1.5.1"
}
}
Disclaimer: The main motivation to try out Sage 10 is that I got stuck adding vuetify with Sage 9.
I’m considering returning back to Sage 9 since I at least managed to get Vue to compile in Sage 9. I’m rather uncertain what is the best option, so would also appreciate some ‘meta’ talk about what would be the best route to go.