I try to use Laravel 5.4 mix with SCSS, but it gives me and error
error in ./mysite/assets/sass/landing/landing.scss
Module build failed: ModuleNotFoundError: Module not found: Error
Can't resolve '../img/somepic.png' in
'/var/www/html/mysite/resources/assets/sass/landing'`
in
mix.sass('resources/assets/sass/landing/landing.scss', 'public/css/landing.css');
However, I don't want to resolve pics at all, I just want them to stay as they were.
Fixed the problem with
mix.options({
processCssUrls: false
});
in webpack.mix.js
Related
My Laravel web application domain is like www.mywebsite.com/my-project/public and I don't want to change.
I installed Vue.js by npm install && npm run dev and try to reference app.js by
<script src="{{mix('js/app.js')}}"></script>
but I got error www.mywebsite.com/js/app.js net::ERR_ABORTED 404 (Not Found)
I try to config path in webpack.min.js
mix.js('my-project/resources/assets/js/app.js', 'public/js')
.sass('my-project/resources/assets/sass/app.scss', 'public/css');
but I think it's not way to fix...
Please help me thank you.
You may do so by adding a mix_url configuration option to your application's config/app.php configuration file:
'mix_url' => env('MIX_ASSET_URL', null)
Reference
I've been using Laravel for years, but I've never used NPM packages in my Laravel apps until now. I'm using Laravel Valet as my development environment.
I am trying to utilize a simple package that interfaces with the remove.bg js package but I can't get it working after hours of trying different things.
Here's what I've done:
Installed the package via npm install remove.bg.
The package was complaining that it couldn't find the modules that it depended on (unirest, http, etc), so I installed them via npm install and even added these fallbacks since it was complaining about Webpack 5 and polyfill:
My webpack.mix.js file:
mix.webpackConfig({
resolve: {
fallback: {
fs: require.resolve('browserify-fs'),
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
path: require.resolve('path-browserify'),
zlib: require.resolve('browserify-zlib'),
},
},
});
In my resources/js/bootstrap.js I added:
import { RemoveBgResult, RemoveBgError, removeBackgroundFromImageBase64 } from 'remove.bg';
window.Removebg = require('remove.bg');
Run npm run dev with no errors.
Included <script src="{{ mix('/js/app.js') }}"></script> in my blade template.
However, when I view my page, I get these errors in the console:
app.js:137237 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
at Object.inherits (app.js:137237)
at Object../node_modules/browserify-zlib/lib/index.js (app.js:28688)
at __webpack_require__ (app.js:139212)
at Object../node_modules/unirest/index.js (app.js:131192)
at __webpack_require__ (app.js:139212)
at Object../node_modules/remove.bg/dist/index.js (app.js:108502)
at __webpack_require__ (app.js:139212)
at Module../resources/js/bootstrap.js (app.js:16242)
at __webpack_require__ (app.js:139212)
at Object../resources/js/app.js (app.js:16230)
I'm stumped. What am I doing wrong here?
You can missed on webpack.mix.js file
Add this line
mix.js('resources/js/app.js', 'public/js');
I'm using Laravel 5.7 and i'm applying AMP to our website. (https://amp.dev/).
I'm folowing these steps to convert HTML to AMP: https://amp.dev/documentation/guides-and-tutorials/start/converting/?format=websites
One of the requirements is to replace external stylesheets to internal stylesheets (https://amp.dev/documentation/guides-and-tutorials/start/converting/resolving-errors?format=websites#replace-external-stylesheets). I've done this by doing the following code below:
<style amp-custom>
{!! file_get_contents(public_path('css/app.css')) !!}
</style>
I'm using Sass and I'm using Laravel mix to compile my assets.
This is my webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
.version();
But upon doing this I've encountered an error in the AMP:
CSS syntax error in tag 'style amp-custom' - saw invalid at rule '#charset'.
To solve this problem, I must remove the #charset "UTF-8"; in the compiled css css/app.css. And it seems that running npm run dev, its automatically adding #charset "UTF-8"; at the top of the file. How do I remove this?
I'm thinking that I have to add some code in the webpack.mix.js to remove that. But I don't have an idea how to do this.
Yep! SASS adds this directive if your SASS contains any extended (e.g., not standard ASCII) characters. There's an open issue in the SASS project to provide an option to not do this... but they've said they won't provide that option.
For now, it's pretty easy to fix... simply add a step that your build process that hunts for #charset "UTF-8"; and removes it. You can see how I did it here:
https://github.com/ampproject/samples/blob/master/amp-camp/gulpfile.js#L63
gulp.task('styles', function buildStyles() {
const cssEncodingDirective = '#charset "UTF-8";';
return gulp.src(paths.css.src)
... (stuff removed)
.pipe(options.env === 'dev' ? replace(cssEncodingDirective, '') : noop())
... (more stuff removed)
});
If you run 'npm run production', that line will be deleted automatically and you will not get an error in AMP validation.
I've updated laravel-mix to version 4.0.12 and faced with broken build on the line in *.scss where I used a relative path to include background image
I got a next files structure
resources/
|-assets/
||-img/
|||-background.png
||-sass/
|||-footer.scss
my code in footer.scss is next
.footer {
background-image: url(../img/background.png)
}
My webpack.mix.js is next
const mix = require('laravel-mix');
const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';
mix
.copy(`${resourcesAssets}images`, `${dest}images`, false)
.sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);
During compling npm run prod I got
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file://C:\xampp\htdocs\laravel-project\resources\assets\sass\footer.scss:2:3
at encodeError (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:218:12)
at onFailure (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:175:14)
at <anonymous>
at runMicrotasksCallback (internal/process/next_tick.js:122:5)
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickCallback (internal/process/next_tick.js:181:9)
at runLoaders (C:\xampp\htdocs\laravel-project\node_modules\webpack\lib\NormalModule.js:301:20)
at C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at onFailure (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:175:5)
at <anonymous>
at runMicrotasksCallback (internal/process/next_tick.js:122:5)
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickCallback (internal/process/next_tick.js:181:9)
error in ./resources/assets/sass/footer.scss
How can I fix this problem?
It's an URL rewriting thing in Webpack as Laravel Mix is built on top of Webpack. For CSS compilation, Webpack rewrites and optimizes any url() calls within your stylesheets.
However, according to the Laravel Docs:
Absolute paths for any given url() will be excluded from URL-rewriting. For example, url('/images/thing.png') or url('http://example.com/images/thing.png') won't be modified.
So, Mix tries to rewrite your CSS to sth. like:
.footer {
background-image: url(/img/background.png?<some-hash-identifier>)
}
In that case, you can disable url() like so and Mix will not touch url(../img/background.png) in your footer.scss:
mix.sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);
.options({
processCssUrls: false
});
The problem was in too new "resolve-url-loader": "^3.0.0".
After installing an intermediate version "laravel-mix": "~3" some time ago it was added to package.json.
Removing it and rerun build helps me to resolve the problem. laravel-mix added "resolve-url-loader": "2.3.1" after running npm run prod.
I'm trying to use a theme which I bought from themeforest with Laravel
I have already use mix.copy to move my fonts from node_modules to my public dir, this works fine./
However when I include the following lines in my webpack.mix file,
mix.less('node_modules/elite-theme/eliteadmin-dark/less/style.less', 'public/css', './');
I get the following errors
Any idea what I am doing wrong here?
Never mind seems like this is doing the trick
mix.options({
processCssUrls: false
});
Set to false to take urls as they are