In my Symfony 4 project, I try to add bootstrap as an import after
yarn add bootstrap --dev
As I follow documentation, I tried to import bootstrap as follows:
#import "~bootstrap/scss/bootstrap";
When I run yarn encore dev, it says module not found.
Than I tried this:
#import "../../node_modules/bootstrap/scss/bootstrap.scss";
The output is:
Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve './alert' in 'C:\Users\tolga\GIT\artifex\node_modules\bootstrap\scss'
What am I missing? alert.scss is there but it cannot find module. What should I try?
It seems I somehow solved the problem. First of all the import directory is this:
#import "../../node_modules/bootstrap";
I don't know why tilde didn't work. Adding sass-loader didn't help.
Old subject but the solution is to change the extension of file app.css to app.scss.
I'm doing following:
npm install bootstrap-select
npm run dev
in app.scss
// Bootstrap Select
#import "node_modules/bootstrap-select/sass/bootstrap-select.scss";
In console it says:
jQuery.Deferred exception: $(...).selectpicker is not a function
TypeError: $(...).selectpicker is not a function
I can see it installed bootstrap-select, how do I import it correctly?
In your /resources/assets/sass/app.scss import bootstrap-select:
#import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
You also need to import bootstrap-select.js to resources/assets/js/app.js make it work:
require('../../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Its possible to add Bootstrap-Select without the complete path:
require('bootstrap-select');
require('bootstrap-select/js/i18n/defaults-de_DE');
#import '~bootstrap-select/sass/bootstrap-select.scss';
in laravel 5.7
in app.scss
#import '~bootstrap-select/sass/bootstrap-select.scss';
in app.js
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select.min');
npm install bootstrap-select
npm run dev
In resources\assets\sass\app.scss
#import "node_modules/bootstrap-select/sass/bootstrap-select.scss";
in resources\assets\js\app.js
require('../../../node_modules/bootstrap-select/dist/js/bootstrap-select.js');
Add app.scss in head
Add app.js before end of body
It may sound stupid but I've recently started working with laravel mix for compiling scss and js files. But I can't understand something.
I want to use rtlcss npm to make the twitter-bootstrap rtl.
This is the default app.scss asset of Laravel
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
And this is the default app.js asset:
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
I've installed the rtlCSS through node package, now I what I want to happen is when I run npm run dev or the watcher, it compiles the bootstrap scss file and make it RTL and put it in the public css directory like it does with the default LTR that is.
Your can easily generate RTL css with Laravel Mix:
First, to use Laravel mix you should install the necessary libraries from npm:
npm install
Then, install webpack-rtl-plugin: npm install webpack-rtl-plugin --save-dev
Then, in webpack.mix.js (located at the root of your laravel app) import the pulgin at the top:
let WebpackRTLPlugin = require('webpack-rtl-plugin');
Then, replace the:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
with the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
plugins: [
new WebpackRTLPlugin()
]
});
Finally, run: npm run dev (for develpoment) or npm run prod (for production)
As a result, Larave Mix will generate:
public/css/app.css (the original css from sass)
public/css/app.rtl.css (the RTL css version)
and public/css/app.js
I tried multiple solutions with no luck after multiple tries the below code works fine and it covers all mix features like versioning, source-maps, etc.
Don't forget to install rtlcss package
mix.sass('resources/sass/app.scss', 'public/css');
mix.postCss('public/css/app.css', 'public/css/app.rtl.css', [
require('rtlcss'),
]);
I'm using the Encore/Webpack in my Symfony project, but Im having troubles with the installation.
I'm following the official guide: Link to official guide
My project folder:
projectname
---/app
---/assets
/css
/global.scss
/js
/main.js
...
---/node_modules
/.bin
/encore
...
---/web
/build
etc
I was following
Create a new file called webpack.config.js at the root of your
project.
It looks like:
projectname
...
webpack.config.js
I filled it with the example code. Afterwards I wanted to 'build' the assets with the command encore dev on path: projectname\node_modules\.bin
When I do this, I get the following error code:
Running webpack ...
No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.
I have no idea what I'm doing wrong. When I move the webpack.config.js to the .bin folder.. that part works, but than the build doesn't work, because it wants to install the files into .../.bin/build/ which is not correct. I want it into projectname/build like the example.
try this commend it's work for me
install webpack-notifier#^1.6.0 --save-dev
For my admin panel I extract all the assets including the manifest-json.js to mix.setPublicPath(path.normalize('public/backend/')).
All the files get correctly added to the backend folder, and the manifest-json.js file looks as follows:
{
// all correct here
"/js/vendor.js": "/js/vendor.js",
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css",
"/js/manifest.js": "/js/manifest.js"
}
the problem is that when using
{{ mix('backend/css/app.css') }}
in my blade-files, it looks in public/manifest-json.js instead of looking for it in backend/manifest-json.js.
How can I make sure the right manifest-json.js file is used?
I had same exception after deployment laravel project to server. It was working perfectly fine on localhost but after lot of research I found a solution. If you encounter this exception on server then you have to bind your public path to public_html
Just go to under the app/Providers, you will find your AppServiceProvider file and inside boot() method make the binding as below.
$this->app->bind('path.public', function() {
return base_path().'/../public_html';
});
i solved my problem running this command
npm install
and then
npm run production
Thank You.
The problem I faced was that the mix()-helper function by default looks for the manifest-json file in /public/manifest-json.js so if you store that file on any other directory level then it will throw that error.
Let's say the manifest-json file is stored in public/app/manifest-json.js, then for a file located in public/app/css/app.css you would use:
<link rel="stylesheet" href="{{ mix('css/app.css', 'app') }}">
The mix()-helper function allows for a second argument, the directory of the manifest file. Just specify it there and it will use the correct manifest file.
i have same problem as questioner: manifest does not exist for solving it what i have done is ran 2 commands as following:
npm install
and then
npm run dev
and the error is solved now. yippi.
In shared hosts and laravel 5.6 tested:
after doing standard levels such as explained here;
two levels needed:
in app/Providers/AppServiceProvider.php:
$this->app->bind('path.public', function() {
return realpath(base_path().'/../public_html');
});
and in public_html file make .htaccess file with content:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
ErrorDocument 404 /index.php
</IfModule>
source: here
this file most change for some situations.
that's all and solved my problem
I had the same issue with a Laravel package, its assets were not published:
This solved the issue for me:
php artisan vendor:publish --tag=telescope-assets --force
Sources:
https://github.com/laravel/telescope/issues/136
https://github.com/laravel/telescope/issues/250
There are 3 ways to solve it, I summarize what the colleagues said above:
The problem is because, you are using mix() in the views.
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
solution 1
change it to this.
<link rel="stylesheet" href="{{ asset('dist/css/app.css') }}">
solution 2
If you don't have root access:
Modify the App\Providers\AppServiceProvider file and add the following to the boot() method.
$this->app->bind('path.public', function() {
return base_path().'/../public_html';
});
solution 3
if you have root access run:
npm install & npm run dev
try the following commands:
npm install
npm run dev
I have same exception after deployment laravel project to (shared) server when trying to reach the login and register page. It works fine on local machine.
I kept the file and folder structure the same as on my local environment (all files that our in the public folder locally are in the public_html folder on the server).
The solution mentioned above seems to work. Adapted to my file and folder structure I added the following code to AppServiceProvider file and inside boot() method.
$this->app->bind('path.public', function() {
return realpath(base_path().'/public_html');
});
The only issue now is that the CSS of the login, register and dashboard page is messed up. I'm totally new to Livewire, I have no clue how to fix that.
You should run this commands to install npm dependencies and make your frontend files:
$ npm install
$ npm run dev //or production
Now you're done and you can run your laravel project:
$ php artisan serve
In a shared hosting environment, Remove the mix e.g. {!! script(mix('js/manifest.js')) !!}
should be changed to
{!! script('js/manifest.js') !!}
This actually works for me
I got the same error
because when I run
npm install
npm run dev
I got some error.
It was fixed when I updated my nodejs version.
I'm just posting maybe someone would need it.
For me it's worked when I changed in my blade file css and js pointed path. As bellow:
In my blade was this:
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
I changed the MIX to ASSET as:
<link rel="stylesheet" href="{{ asset('dist/css/app.css') }}">
Also the same on JS file to:
<script src="{{ asset('dist/js/app.js') }}"></script>
If it's the same thing for everybody, in my case laravel-mix seems to be not installed so without changing any files I just installed laravel-mix by running:
npm install laravel-mix#latest --save-dev
For bind your public path to public_html, in file index.php add this 3 lines:
$app->bind('path.public', function() {
return __DIR__;
});
This is work for me on shared hosting
Try to Add your public route to your app/Providers/AppServiceProvider.php
public function register()
{
$this->app->bind('path.public',function(){
return'/home/hosting-name-folder/public_html';
});
}
Directory Structure like this
--- public
--- app
--css
--app.css
--js
--app.js
Import css js in laravel blade file like this
<link rel="stylesheet" href="{{ asset('app/css/app.css') }}">
<script src="{{ asset('app/js/app.js') }}" type="text/javascript"></script>
If you are having this issue with Laravel Nova or telescope then perhaps you are really missing mix-manifest file. You should have that file inside public/vendor/toolname/
Where toolname can be Nova or Telescope. If you have that folder, you should go ahead and put in your server otherwise you will first have to publish the assets & then put it on server.
I change resources/layouts/guest.blade.php and resources/layouts/app.blade.php
<!-- Styles -->
<link rel="stylesheet" href="{{asset('css')}}/app.css">
<!-- Scripts -->
<script src="{{asset('css')}}js/app.js"></script>
and resources/css and resources/js copy my public folder
The Mix manifest does not exist.
You can solve this problem by updating the node version.
actually when you run command npm run dev,
show the error message "Error: You are using an unsupported version of Node. Please update to at least Node v12.14"
so easily you can fix it by updating the node js version
Thanks
if your previous setup is correct.but you are looking this type of error it shows The Mix manifest does not exist. then write these command .
npm ci
npm run dev
I resolved my problem by this command :
npm install
npm run dev
Worked for me on a fresh install of Laravel 9 with Jetstream(using Laradock).
npm run install && npm run development
When running npm run dev the mix was not compiling the files and creating the mix-manifest.json
step1
npm install
npm run production
step 2
refresh by simply closing and opening the project
step 3
replace <link rel="stylesheet" href="{{ mix('css/app.css') }}">
with
<link rel="stylesheet" href="/css/app.css/">
Here you go!!!!!
I got the same problem when hosting on cpanel
just change from
{{ mix('backend/css/app.css') }}
Becomes
{{ asset('backend/css/app.css') }}
it's solve my problem.
don't forget to upvote if this answer help u
There are a lot of answers to these questions, I am posting this question just in case if any miss these points.
Method: 1
Make sure to check the .gitignore file. sometimes it's listed there and doesn't make the file be pushed to git repo
Method: 2
Add this code in webpack.mix.js so you will exactly know where it's placing the mix-manifist.json file
mix.webpackConfig({
output: {
path: __dirname + "/public"
}
});
I had the issue on a shared host, where I was not able to run npm commands. Then I used the simplest way. In the /vendor/laravel/.../Foundation/Mix.php replace
i$manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);
to
$manifests[$manifestPath] = json_decode(file_get_contents('https://your-domain.com/mix-manifest.json'), true);
Not recommended, but it works. You can use it as your last try.
Faced the same problem on both Windows and Ubuntu. Solved it on Ubuntu (and I presume the solution is simillar in Windows). The problem was due to the fact that my installed npm version was too old.
The solution for me was the following. I installed nvm (NodeVersionManager -version 0.39.1) which allowed me to switch to the latest stable version of node (v16.14.0) and then install npm 8.5.0.
Detailed steps:
Linux bash terminal commands:
touch ~/.bash_profile ~/.bashrc ~/.zshrc ~/.profile
sudo apt install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
logout and login Ubuntu user
nvm --version
nvm ls-remote
nvm install 16.14.0
node --version
...then inside the laravel project:
npm ci
npm install -g npm#8.5.0
npm audit fix
npm run dev
Try out this one!!
<script src="{{ asset('js/app.js') }}" defer></script>
It works for me
I found new solution
The problem is mix manifest right?
So just redirect to the mix manifest feature. for example, you have:
{{ style(mix('css/backend.css')) }}
just change your code into
{{ style('css/backend.css') }}
it works for me