I have created a new project and I want to integrate a css sheet within my website
to add the css files I have done it as follows
line code image
and first of all I used the following commands
composer require symfony/webpack-encore-bundle
tells me to use one of the following commands
npm install
or
yarn install
but I have the following errors
npm install error 1 image
yarn install error 2 image
You should install node and yarn in your laptop
https://linuxize.com/post/how-to-install-node-js-on-ubuntu-18.04/
Related
I did composer create-project laravel/laravel Push "8.0"
In blog file do.
composer require laravel/ui
php artisan ui bootstrap
php artisan ui vue --auth
Then change package.json file to :
https://github.com/laravel/laravel/blob/8.x/package.json#L12
Then do npm install --save-dev cross-env
npm install vue
Second do npm install&&npm run dev
chenasmartin#MacBook-Air-von-Chenas Push % npm install&&npm run dev
up to date, audited 788 packages in 736ms
81 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
dev
npm run development
development
mix
✖ Mix
Compiled with some errors in 785.65ms
WARNING in ./resources/js/bootstrap.js 4:2-22
Module not found: Error: Can't resolve 'bootstrap' in '/Applications/XAMPP/xamppfiles/htdocs/Push/resources/js'
Did you mean './bootstrap'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
8 │ #import '~bootstrap/scss/bootstrap';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources/sass/app.scss 8:9 root stylesheet
at processResult (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/webpack/lib/NormalModule.js:751:19)
at /Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/webpack/lib/NormalModule.js:853:5
at /Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass-loader/dist/index.js:54:7
at Function.call$2 (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:98905:16)
at render_closure1.call$2 (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:84431:12)
at _RootZone.runBinary$3$3 (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:29484:18)
at _FutureListener.handleError$1 (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:28006:21)
at _Future__propagateToListeners_handleError.call$0 (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:28313:49)
at Object._Future__propagateToListeners (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:3896:77)
at _Future._completeError$2 (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:28159:9)
at _AsyncAwaitCompleter.completeError$2 (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:27807:12)
at Object._asyncRethrow (/Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:3699:17)
at /Applications/XAMPP/xamppfiles/htdocs/Push/node_modules/sass/sass.dart.js:19760:20
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors and 1 warning
How can i fix that
Try to install bootstrap manually with npm so you run the following command:
npm install bootstrap
If this not work, you can manually switch back to node-sass,
Run the following command to install the node-sass dependencies:
npm install node-sass
Now change the following code :
mix.sass('resources/sass/app.sass', 'public/css', {
implementation: require('node-sass')
});
Delete your node_modules folder and retry to run :
npm install
in browser in console part shows the Error:
GET http://localhost:8000/asset/app.js net::ERR_ABORTED 404 (Not Found)
then I tried to install boostrap using documentantion steps are.
1. composer require laravel/ui --dev.
2. php artisan ui bootstrap.
3. php artisan ui bootstrap --auth.
4. npm install.
but here again in 4th Section it shows the Error and that the command not found.
Still not working bootstrap
You are saying you are getting an error with the 4th command. I assume you do not have NPM installed.
Try installing NPM from here https://www.npmjs.com/get-npm. NPM is Node Package Manager. It will handle the front end dependencies for you. And is used to compile everything.
Also, after npm install run npm run dev to compile the javascript and such.
Install node to enable npm.
Also you can include bootstrap CDN directly in the tag in your blades like a normal HTML project without installing it.
Here's how to add bootstrap CDN in your HTML file - Remember, blades are finally HTML files.
Bootstrap CDN
I'm following a tutorial where they use laravel mix, and for that I must install node.js and then installi npm. But the problem is that when I execute the command npm install, the console returns the following errors:
What could be the problem?
VIEW IMAGE
Delete node_modules folder and run npm install again. Most times this fixes the issue
I am pretty new in PHP and moreover in Laravel and I have the following problem: I have to correctly install latest Bootstrap CSS framework version into my Laravel application.
Into the Bootstrap download page: http://getbootstrap.com/getting-started/#download
it says that I can do it using composer by this statment:
composer require twbs/bootstrap
So I tryied and I obtained this output in my console:
Andrea#Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ composer require twbs/bootstrap
Using version ^3.3 for twbs/bootstrap
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Installing twbs/bootstrap (v3.3.7) Downloading: 100%
Package illuminate/html is abandoned, you should avoid using it. Use laravelcollective/html instead.
Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.
What exactly means the previous output? It has been successful? My doubt is that I can't find the bootstrap.css file into the .../resources/assets directory of my project.
Why? What am I missing? How can I use Bootstrap into my project?
EDIT 1: I saw that Composer have putted BootStrap in this folder:
.../vendor/twbs/bootstrap/dist/css/bootstrap.css
So, following this SO link: How to setup bootstrap after downloading via composer?
I have tryed to do:
php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css
to publich the content of the vendor/twbs/dist/css as an asset but I obtain this error message:
Andrea#Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css
[Symfony\Component\Console\Exception\CommandNotFoundException]
There are no commands defined in the "asset" namespace.
So it seems that asset statment doesn't exist.
What have I to do?
You are importing bootstrap wrong way. Mostly laravel uses composer for pulling server-side libraries. Bootstrap is used for front end basically.
Laravel By Default Provides Bootstrap for you, see here.
Following are the steps which will help you.
Step 1 : Check Node.js and NPM are installed on your machine.
node -v
npm -v
If not installed don't worry here is the link.
Step 2 : (Considering you installed node.js) Go to project root folder and execute following command.
npm install
this command will download all pre-requisites along with your bootstrap.
Step 3 : compile the required js files.
npm run dev
Step 4 : Add js file to your application.
<script src="/js/app.js"></script> (Or it would be already imported)
That's it!
You can find more here and here
Hope it helps you!
If i were you i wouldn't do all of that, after a fresh installation of laravel 5.4 twitter bootstrap come out of the box you just need to load your dependancies using npm .
Install npm dependancies :
npm install
Then, Implementing Bootstrap into your project is now simple. Open resources/assets/sass/app.scss and see this line:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
now to compile all bootstrap sass files to your public folder public/ you should use npm run dev or npm run production if you're in production environnement .
then you have all the Bootstrap styles ready for you to use.
That’s literally all that is required.
****Bootstrap 4 can be easily installed with following steps.****
Step 1 — Remove existing bootstrap
Uninstall Bootstrap
npm uninstall --save-dev bootstrap-sass
Step 2 — Install Bootstrap 4
Install Bootstrap 4 beta and popperjs
npm install --save-dev bootstrap#^4.0.0-beta.2 popper.js
Step 3 — Update code references
In resources/assets/js/bootstrap.js replace
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
with
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
} catch (e) {}
In resources/assets/sass/app.scss replace
#import “~bootstrap-sass/assets/stylesheets/bootstrap”
with
#import “~bootstrap/scss/bootstrap.scss”
In resources/assets/sass/_variable.scss replace
$font-size-base: 14px;
with
$font-size-base: 0.875rem;
Step 4 — Recompile Assets
Run
npm run dev
Now you have removed all Bootstrap 3 references and installed Bootstrap 4
This worked for me:
run php artisan preset bootstrap
install node.js if not from the official website
run npm install
run npm run dev
And use these at your HTML:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
I've installed the latest Sylius-Standard (based on Sylius 1.0#dev) and followed the quick tutorial. Everything is working fine except the admin panel, where CSS and JS return 500 when accessed in dev mode (via app_dev.php).
I can see that they are fetched from a path that does not include app_dev.php. For instance, app.js is fetched from http://my.local.domain/assets/admin/js/app.js, which returns a 500 because it tries to access the prod database that is not setup.
There should be no need to create the prod database or install prod assets to access the admin panel in dev mode — what am I doing wrong?
Sylius use a gulp library to manage css and js. The following command should fix your problem:
$ npm install
$ npm run gulp
Edit
After a few years, this is the proper answer: https://stackoverflow.com/a/59135635/4243630
In order to see a fully functional frontend you will need to install its assets.
Sylius uses Gulp to build frontend assets using Yarn as a JavaScript package manager.
Having Yarn installed, go to your project directory to install the dependencies:
$ yarn install
//Then build the frontend assets by running:
$ yarn build
We are on Sylius 1.2.x, we followed the official documentation
This sorted out that problem for us.
If you are on 1.x this is the link to the documentation
This should solve your problem.