This is my webpack.mix.js file:
let mix = require('laravel-mix');
mix.js(['resources/assets/admin/js/app.js',
'resources/assets/admin/js/core/app.js',
'resources/assets/admin/js/core/libraries/bootstrap.min.js',
'resources/assets/admin/js/core/libraries/jquery.min.js',
], 'public/assets/admin/js/all.js')
.styles(['resources/assets/admin/css/bootstrap.css',
'resources/assets/admin/css/core.css',
'resources/assets/admin/css/components.css',
'resources/assets/admin/css/custom-style.css',
'resources/assets/admin/css/colors.css',
'resources/assets/admin/css/icons/fontawesome/styles.min.css',
'resources/assets/admin/css/icons/icomoon/styles.css',
],
'public/assets/admin/css/all.css').sourceMaps();
I run nmp run watch command and when I edit any js files it recompiles immediately but when I edit css files nothing happens! how can I solve this issue?
Actually scripts() and styles() are being run in background when you run npm run watch. But laravel-mix does not notify about that on terminal.
You can find discussion about this issue here on laravel-mix project from Owner.
May be solution for your issue would be updating the laravel-mix version and check if workaround is implemented for this issue.
Hope it helps you!
Related
On a Laravel application, while trying to run:
npm run dev
I get the following message:
npm run dev
dev
npm run development
development
mix
Mix was not set up correctly. Please ensure you import or require laravel-mix in your mix config.
99% done plugins BuildOutputPlugin
node version: v14.18.2
npm version: 8.2.0
No js and css output to public/js and public/css is being produced and I get no other error.
I removed and readded node-modules folder several times..
Any ideas how can I solve this issue pls?
For me, the solution for this error is to insert this line at the top of the webapck.mix.js file:
let mix = require('laravel-mix');
I'm trying to change the color theme of bootstrap with sass. I'm running the command npm run watch and when I save it does in prompt me with:
Laravel Mix Build Successful
When I view my page I do not see the changes. (I've cleared cache and hard refreshed as well as closed broswer/new browser) To do this I'm updating "warning" to be a purplish color, but bg-warning is not changing to a purplish background (I believe this is what is intended).
I'm using Laravel framework 5.5
Here is my webpack.mix.js
Here is my app.scss
Here is my base/_colors.scss
I've tried throwing my base/_colors.scss code straight into the app.scss file with no luck either. (Even though it says it builds properly.)
I've also tried running the following with no success:
npm run dev
npm run production
Edit: the other possibility is this is not how sass works with bootstrap. Do I need to actually assign things the color of $warning or does this look for all instances of $warning (.alert-warning, .bg-warning, etc.) and replace?
Try running npm hot, that helped me:
npm run hot
I would do following further steps:
check if the folder base really exists
create a a new css file which in not inside a folder (base) just to check that that does not cause an error
Write simple css in your _colors.css and check if that works
add an !important statement after your color declaration to check if it does not have to do anything relating overriding the styling
I am a beginner to this framework. i have added new css files in my sass folder and compiled them successfully to use.
How can i add new js file in assets folder and compile them to use ?
You can do somethink like this but before stop npm compiling:
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/frontend/js/scripts.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/frontend/scss/style.scss', 'public/css');
And then run just npm run dev or npm run watch.
i concluded some things as a beginner:
1. we put our js or css files in assets/css, assets/js folder and using webpack.min.js we compile this files and minimize.
2. after compilation, the compiled code generates in public/css, public/js folders accordingly.
3. My js file has some external links and things as i am using a theme for a blog, and it is getting issues in compilation.
4. the solution is to put your files directly in public/js or public/css folders .
If anyone has any further suggession... please share.
Thanks
I use sass code in nuxt components simply by adding lang="scss" in the style tags. When I add this attribute to the style tag in a layout file (layouts folder) the style tag isn't processed any more and the following css (scss) code ignored.
Can anybody explain what's happening and how to fix this issue?
You have to install node-sass and sass-loader in order to use pre-processor, run this terminal command in the project folder
npm install sass-loader node-sass --save-dev
And take a look this link to enable other pre-processor in Vue, Pre-Processors - vue-loader
Problem solved: After having re-started the dev server (npm run dev) nuxt compiled scss code correctly. The issue seems to be limited to the live browser update in dev mode.
I am having some issue, its killing me. please help.
I am trying to run npm in DEV using command: npm run dev
In my webconfig.mix.js : mix.sass('resources/assets/sass/style.scss', 'public/css');
95% emitting
ERROR Failed to compile with 4 errors 05:33:52
This dependency was not found:
* -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/Code/pudatalk/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/style.scss
To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css
Please see the error above.
So, i found out that its happening when i import :
#import "~bourbon/app/assets/stylesheets/_bourbon.scss";
and i implemented something like :
.error-bg-img {
background:url("../img/errorbg.jpg");
background-size:cover;
}
I am trying to tell you what i had in the code that occur the problem.
I have been trying google it, reinstall so many things, move things around but hopeless. I am a newbie in sass, webpack, and laravel-mix.
Thanks so much
Alright guys,
I fixed the problem, i didn't now that webpack will automaticly copy the image in /img folder to /public. So i moved my /img from public/ folder to /resources/assests/. And everything is fine now.
Its all about the path. Sorry i am pretty new with webpack and didn't know about that.
#import "bourbon/bourbon";
Have a look at the installation guideline here: https://github.com/thoughtbot/bourbon#requirements