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
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've tried to write SCSS in my Maven project with React in IDEA. I have sass and sass-loader in npm packages. But I always get a weird error:
Syntax error: missing semicolon
This is a very simple scss example for test. I can't use other tag selectors as well. I've added scss variable on the top to see if it causes an error but it doesn't and all the errors stop at tags. I think that means that scss file is readable after all. And everything is ok when using just css. What's going on?
I solved the problem. Maybe someday it would be useful for somebody.
The point is I missed restarting webpack when changing it. I found configs for sass-loader on its npm page and added it to my webpack.config.js and then run webpack --watch --progress. Everything finally worked
I was working on my angular 7 application and during the work automatically the red alert shown with the message that modules not found in my app.modules.ts. This is happening to me 3rd time.
Before that, I remove the node_modules dir and re-install the dependencies using npm install.
Here is the image for more understanding. Can anybody tell me about this issue?
I think you need to remove node_modules and run npm install again.
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
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!