When trying this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css/app_blue.css', {
data: '$theme-bg-primary: #1450d9;'
})
.sass('resources/sass/app.scss', 'public/css/app_red.css', {
data: '$theme-bg-primary: #ba0000;'
});
the output from npm is should not contain the item '[...]/app.scss' twice.
How to ouput 2 distincts css from one source as app.scss ?
Instead of injecting your data into the mix call, you need to create a stub scss file for each theme you are creating.
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app_red.scss', 'public/css')
.sass('resources/assets/sass/app_blue.scss', 'public/css')
Where those scss files include the base app.scss and overrides that you are injecting with your data value.
Since you are using a different variable values for both css files. You have to call .sass twice but to optimize it further i would suggest you to use variables.
e.g.
const cssSourceDir = 'resources/sass/';
const cssPublicDir = 'public/css/';
const commonSassFile = `${cssSourceDir}/app.scss`;
duplication can be removed like this
mix.js('resources/js/app.js', 'public/js')
.sass(commonSassFile, cssPublicDir+'/app_blue.css', {
data: '$theme-bg-primary: #1450d9;'
})
.sass(commonSassFile, cssPublicDir+'/app_red.css', {
data: '$theme-bg-primary: #ba0000;'
});
Related
I am trying to upgrade Laravel Mix in my Laravel project from v2.x to v4.x
Everything works fine in v2.x
I have multiple components declared globally which is only called on specific pages
app.js
function pageIs(page, data) {
if ($('body').data('page') === page) return data;
return {};
}
const ClientCompaniesComponents = pageIs('client-companies', {
'client_companies_listing': require('./components/ClientCompanies/List').default,
'company_users_invitations': require('./components/ClientCompanies/InvitationList').default,
'client_company_edit': require('./components/ClientCompanies/Edit').default,
'client_company_show': require('./components/ClientCompanies/Show').default,
});
....
const AllComponents = {
...ClientCompaniesComponents,
// other components
}
new Vue({
el: '#vue_app_content',
components: AllComponents,
....
For each component may contains local styles
<style>
.mb1 {
margin-bottom: 1em;
}
.first {
margin-left: 30px;
}
</style>
In Laravel Mix v2.x, local styles were not bundles in css/app.css and style will only work in specific pages in which the component was called.
In Laravel Mix v4.0, all local styles are now bundled in css/app.css
What should I do to keep the same behavior from v2.x?
extractVueStyles: true component styles bundled in css/app.css,
extractVueStyles: false all styles added as for all pages
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.options({
extractVueStyles: true
})
.version();
In my laravel project I use nwidart.
Each module has its own node_module and webpack.mix.js file. When I run npm run dev on each module, other modules and main vue components does not work and shows this error:
example.js:31589 [Vue warn]: Failed to resolve async component: function () {
return webpack_require.e/* import() */(4).then(webpack_require.bind(null, 44));
}
Reason: TypeError: Cannot read property 'call' of undefined
Here is my Module webpack file:
let mix = require('laravel-mix');
mix.setPublicPath('../../public/');
mix.js(__dirname +'/Resources/assets/js/example.js', 'js/')
.sass(__dirname +'/Resources/assets/sass/example.scss', 'css/');
Main webpack file:
let mix = require('laravel-mix');
require('laravel-mix-merge-manifest');
mix.mergeManifest();
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
How can I fix this?
When I run npn run dev on my Laravel project I get:
Is there any way to change the name of these numbered javascript assets to something unique such as a hash based on contents? They don't seem to have a cache busting hash in the query string when being requested and I have noticed issues from time to time with browsers caching these. Here is my webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/web.scss', 'public/css/web.css')
.options({
processCssUrls: false,
}).version();
mix.extract(['vue', 'jquery']);
This is what I eventually ended up doing and it works well:
mix.webpackConfig({
output: {
chunkFilename: "[name].[chunkhash:8].js",
filename: "[name].js",
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/web.scss', 'public/css/web.css')
.options({
processCssUrls: false,
}).version();
mix.extract(['vue', 'jquery']);
my web pack.mix.js codes are
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
moment: 'moment'
});
mix.js('resources/js/app.js', 'public/js')
.mix.js('resources/js/theme.js', 'public/js')
.mix.js('resources/js/admin.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/theme.scss', 'public/css')
.sass('resources/sass/admin.scss', 'public/css');
I have this codes in resource/js/theme.js
require('./files/jquery3.3');
require('./files/functions');
require('./files/effect');
I declare some functions in files/functions.js
and use them in files/effect.js
but the browser console gives me this error
Uncaught ReferenceError: 'my_function' is not defined
note: my_function declared in files/functions.js and called in files/effect.js
You need to add file full name i.e. file name + extension
require('./files/jquery3.3.js');
require('./files/functions.js');
require('./files/effect.js');
In 5.2 I was using gulp and I just set this in app.js
window.$ = window.jQuery = require('jquery');require('jquery-ui-bundle');
This doesn't work anymore so I was able to load jquery from webpack.mix.js like this:
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
});
But how do I load jquery-ui-bundle?
Simply put all your JS file and components in resources/assets/js/
and
webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/assets/js/.....js', 'public/js');
Compile and Run using npm