I'm new to Laravel and I've read a few other questions on Stackoverflow about adding custom styling to Laravel.
The reason I'm creating a new stackoverflow question is because Laravel seems to compile a single app.css, that also loads bootstrap. I think this is created by running npm run dev, which compiles the app.scss in the resources sass folder.
In that given file bootstrap is loaded by #import '~bootstrap/scss/bootstrap'; I'd like to follow this principle too with my own custom styling, so that I get something along the lines of #import '~mywebsite.css';
This way I'd end up with a single .css file which I think is far more eloquent.
What's the appropriate way to go about this? Additionally, where is this 'bootstrap' styling located that is being imported? I fail to understand where '~' is located.
Last but not least, is it possible to use the same approach for the app.js file?
With much regards,
Chuck
you can create a new sass file in /resources/sass for example _test.sass
and put the import in the app.sass like this:
#import 'test';
and compile with npm run dev or npm run watch
if you need create a new file in your public folder you can create a new sass file (example.sass) and then change the webpack.mix.js file and put your new css line
like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/example.scss', 'public/css');
and compile with npm run dev.
regards!
Related
I am trying to run a laravel app in my local system. I have followed the https://gist.github.com/hootlex/da59b91c628a6688ceb1 link. I run the command php artisan serve command, and when I browse it, then produces the error
PHP Fatal error: Uncaught Exception: Unable to locate Mix file: /css/vendor.css. Please check your webpack.mix.js output paths and try again. in /var/www/html/laravel-app/app/helpers.php:439
In the specified line of helpers.php, it has
if (! isset($manifest[$path])) {
throw new Exception(
"Unable to locate Mix file: {$path}. Please check your ".
'webpack.mix.js output paths and try again.'
);
}
public/mix-manifest.json
{
"/mix.js": "/mix.js"
}
I couldn't sort it out. Please help. Thanks
The blade file you're loading obviously has mix('/css/vendor.css') call. You either comment out this line(s) or install npm then build your assets.
Your manifest file doesn't have /css/vendor.css but if you check your blade files (views) you'll see you are calling mix('/css/vendor.css'). So if you find and comment out this line(s) your problem will be solved.
Ideally, mix() is used for loading assets that were built by webpack. It will then take care of the versioning string for you. How mix can be used is detailed in the documentation. I will refrain myself from discussing that here.
You've built your assets by running npm run dev or similar commands. And then the manifest file doesn't contain those assets mapping. And your public directory doesn't have those assets as well. Then it's safe to assume that you can remove those mix calls from your blade (views) files.
If you have the assets built in your public directory then you can load those assets by assets function.
Lastly, you should know your assets first, before loading them to your site. I get the notion that you don't have any clue where those assets came from, so you shouldn't load them in the first place.
This happened with me and after spending quite some time and effort, I did manage to figure out what was happening and how to fix it.
Here's what happens:
You update your webpack.mix.js file with the destination where you wish to publish your compiled JS and CSS files respectively.
mix.js('resources/js/app.js', 'public/js').vue();
Mix compiles and stores the hence generated CSS and JS files within their respective destination folders when you run npm run dev or npm run watch.
laravel-app (Your laravel app root folder)
\public
\css
\app.css
\js
\app.js
When you open the application in your browser with, say Valet, Laravel spits out the following error message:
Unable to locate Mix file: /js/app.js
(or)
Unable to locate Mix file: /css/app.css
Something worth noting on the Uncaught Exception screen though, is that Laravel by default attempts to look for the files at localhost:8080. Implied that Laravel is looking for the files respectively at:
localhost:8080\css\app.css
(and)
localhost:8080\js\app.js
Hence, if your hostname or port is anything other than localhost:8080, Laravel would not be able to find your files. For example, if you're using Valet, your default URL would become laravel-app.test where laravel-app is the name of your app's root folder.
But, there's a way to fix this. And it comes directly out to Laravel's documentation.
Solution (TL;DR)
In order to use a custom mix base URL, you would require to update your config\app.php file to add the following configuration value for setting the mix URL:
'mix_url' => env('MIX_ASSET_URL', 'localhost'),
With your mix_url config option set in your app.php file, you should now be able to manipulate it by adding the MIX_ASSET_URL key in your .env file and setting it to blank, so that it points to \public\js\app.js and \public\css\app.css respectively, within your project directory.
MIX_ASSET_URL=""
That solved it for me. Hope it does it for your too. Lemme know how it goes. Cheers!
Try running npm install and after that build the assets, either npm run dev or npm run watch , depends on what you are using.
In my case,
laravel 9
I should have changed the mix-manifest.json file
"/js/application.js": "/js/application.js",
"/js/admin.js": "/js/admin.js",
"/css/application.css": "/css/application.css",
"/css/admin.css":"/css/admin.css"
Delete package-lock.json.
Delete folder 'node_modules' and run 'npm install' to reinstall all modules.
Then run 'npm run watch' or 'npm run production'.
That helps me to fix that problem.
check the package.json file for the command to build the scripts and styles, normally you will have by default: npm run dev. Might happen that you will need to run:
npm rebuild node-sass
npm run dev or npm run watch
I changed my webpack.mix.js files and made these changes there and worked. Only define the specific path to public/js/app.js in webpack.mix.js
mix.js(
[
"resources/assets/js/jquery.js",
"resources/assets/js/popper.js",
"resources/js/app.js",
],
"public/js/app.js"
)
.autoload({
jquery: ["jquery", "jQuery", "$", "window.jQuery"],
Popper: ["popper", "Popper", "popper.js"],
popper: ["Popper", "popper.js"],
})
.vue()
.postCss("resources/css/app.css", "public/css", [])
.sass("resources/sass/app.scss", "public/css")
.disableNotifications(); // to disable notifications of building app;
In My case, I change
'debug' => false, to true
in the file app.config under config folder in my project to see log in my browser. Then when I run my project got error above like you. then I change to
'debug' => false again. It works.
I have some issues with using React in Laravel 5.5. Every time I add or make changes to a component, I have to run npm run dev to compile the thing. When I do this the contents of css/app.css get reset, so I cannot write styles to this file.
Styles get unchanged if I have them in another CSS file, but I'd like to have my main styles written in css/app.css.
How can I do this?
Keep all your css styles in a file in your resources directory and add the below code to end of your webpack.mix.js file.
mix.styles('path to your css file in resources directory', 'public/css/app.css');
If you are using sass use the below code
mix.sass('path to your css file in resources directory', 'public/css/app.css');
Also you no need to run npm run dev each time you make changes to your components. just run npm run watch and it will continuously look for changes and re-compile the components if anything is changed.
I am currently new to Sass and my friend gave me a project that contained a Material Design 'template', that he made.
Unfortunately there is no .css file that got all the stylesheets in it.
There are a couple of .scss files though but I do not really know how to compile them all to a .css file.
I figured out that I could use 'gulp', but when I add all the files in the gulpfile.js to be compiled, it doesn't work.
I am wondering if someone could help me over Skype or something that I could share my screen and that someone could fix this for me.
Here you can see that there are many scss files and there are two folders with components and mixins.
Some of the scss files also contain '#import' lines, but I do not know if I have to add those files in the gulpfile.
Here is a screenshot of the components folder:
I could not post a 3rd screenshot because of my reputation but the mixins folder contains the following files:
- _alerts.scss
- _buttons.scss
- _md-shadow.scss
- _placeholder.scss
I hope that someone could help me with this!
PS: It is in a Laravel project!
Thank you so much!
Kind regards,
smke
You can use Scout-App easily with sass and you should create a scss file without undescore (_) to import other scss file with underscore. In Scout-App you have to select input folder that include directory with scss files and select output folder where you want to be css file export.
Luckily, there's a SCSS to CSS converter online. Just go to http://www.cssportal.com/scss-to-css/ and copy the paste the code and press Compile. The CSS code will display below the button for you to copy and paste.
I have an existing PHP project with jquery and bootstrap, not using any front-end framework.
I am trying to use webpack module bundler in order to create a single entry point for my project resources, manage js dependencies with node js package manager, run tasks as minify js css, image re-size...etc. And improve the browser loading time required to load a single page.
I came across the webpack tutorials and got to install it and install its dev-server, but the problem is that I am not able to understand how I will convert all my current js scripts and css links in the project (where I have a lot of jquery and CSS libraries used to provide multiple features in the project) to use webpack.
Do I have to rewrite all my JS and CSS files in a way that suits webpack? How do I make a successful migration?
Besides, I am not able to run my current php application on the webpack dev-server, is it meant to run there in the first place? It is only listing the directories of the project in the meantime.
I have created a test index.js file and used the following webpack configuration:
var path = require('path');
var webpack = require('webpack');
module.exports =
{
entry: [
'./public/js/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080'
],
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
path: path.join(__dirname, "public/dist/js"),
publicPath : "http://localhost:8080/my_proj/public/dist/js",
filename: "bundle.js"
}
};
I added the bundle.js to my script loads just for testing as follows hoping that the application will run on the webpack dev-server:
<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>
Please help me understand the concept here and how can I make this migration successfully?
First, to answer your smaller questions:
No, you're not supposed to run your PHP application through a webpack dev server. Explained in the Live Reloading section below.
No, you won't have to rewrite your assets. Probably. See the CSS and Edge Cases sections below.
Disclaimer: I'll only take on a small fraction of your question. Its scope is just way too broad to be packed into just one StackOverflow answer.
I will only get in touch with
setting up a development and a production environment for webpack
bundling your first JavaScript
which should give you a foundation to build on.
I'll also mention some things you may want to add and link according resources to read through.
So, let's go.
Requirements
I assume you have Node.js and npm installed on your machine and roughly know how to use them.
I also assume you have webpack and webpack-cli installed as (dev) dependencies of your project (not just globally):
npm install --save-dev webpack webpack-cli
Update: Earlier versions of this answer did not require installing webpack-cli. As of version 4 (February 2018), webpack's CLI resides in its own package, hence the additional required package.
Set up development and a production workflow
You usually want to do stuff differently in development than in production (minifying in production, live-reloading in development, ...)
To achieve that, we'll want to split up our configuration files.
Prepare the directory structure
Let's agree to ignore the webpack config from your question. We'll start all over, we'd have to change almost everything anyway.
First, create a build folder inside your project root. Build-related stuff will go there, since we don't want to pollute your project's root folder with config files. (You're free to name this folder differently, but keep track of that during this tutorial.)
Create a config.base.js, a config.production.js and a config.development.js file inside that folder.
Great, we have config files for two build chains now. The configurations are still empty though, so let's now fill them with some basic logic.
Install webpack-merge
But first, we'll need to install webpack-merge.
npm install --save-dev webpack-merge
This package allows us to deeply merge multiple webpack configurations. We want to use it to create webpack configurations depending on our current environment.
Adjust your configuration
Now adjust your build/config.base.js:
module.exports = {
// We'll place webpack configuration for all environments here
}
The file does obviously just export an empty object right now, but we'll need that for the following steps.
Put this code in your build/config.production.js:
const { merge } = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'production'
// We'll place webpack configuration for production environment here
})
And almost the same code goes into your build/config.development.js:
const { merge } = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'development',
watch: true
// All webpack configuration for development environment will go here
})
I guess it's pretty intuitive what this does:
Using webpack with the config.development.js configuration will fetch the common configuration and merge its own config declaration in.
Update: The mode option in the above config files was added in webpack 4 (released February 2018). It sets a bunch of sensible defaults for development and production bundles.
Now running the process would look like this from the command line:
npx webpack --config build/config.development.js
# If the above doesn't work, you probably have an older version of npm (< 5.1) installed
# While npx is a really great tool, you can of course still call the path of the webpack executable manually:
node_modules/.bin/webpack --config build/config.development.js
...and vice versa for the production environment.
That command is rather clunky to use, but no worries, we'll address that later.
Make some helper files
There are information we'll be wanting to centralize to make them easily exchangeable. File paths are such a thing. So let's extract them.
Create a paths.js in your build folder and have it export some paths we'll want to use later:
const path = require('path')
// I'm really just guessing your project's folder structure from reading your question,
// you might want to adjust this whole section
module.exports = {
// The base path of your source files, especially of your index.js
SRC: path.resolve(__dirname, '..', 'public'),
// The path to put the generated bundle(s)
DIST: path.resolve(__dirname, '..', 'public', 'dist'),
/*
This is your public path.
If you're running your app at http://example.com and I got your DIST folder right,
it'll simply be "/dist".
But if you're running it locally at http://localhost/my/app, it will be "/my/app/dist".
That means you should probably *not* hardcode that path here but write it to a
machine-related config file. (If you don't already have something like that,
google for "dotenv" or something similar.)
*/
ASSETS: '/dist'
}
Create aliases
As mentioned above, we could technically run our build chain in development mode like this:
npx webpack --config build/config.development.js
That's an uncomfortably verbose command though, so let's change that.
It's way more convenient to run your build process via npm scripts. Add one script per environment to your package.json like this:
{
"scripts": {
"dev": "webpack --config build/config.development.js",
"prod": "webpack --config build/config.production.js"
}
}
Now you can run your build chains with npm run dev resp. npm run prod – which is much easier to memorize and faster to type.
...as soon as there'es anything to build, of course.
Bundle JavaScript
Okay, that was actually a fair amount of work without achieving too much so far.
So let's start with something more exciting: We'll define a JavaScript entry point.
Define an entry point
Put the following code into your build/config.base.js (replacing the existing code entirely):
const path = require('path')
const { SRC, DIST, ASSETS } = require('./paths')
module.exports = {
entry: {
scripts: path.resolve(SRC, 'js', 'index.js')
},
output: {
// Put all the bundled stuff in your dist folder
path: DIST,
// Our single entry point from above will be named "scripts.js"
filename: '[name].js',
// The output path as seen from the domain we're visiting in the browser
publicPath: ASSETS
}
}
Create the JavaScript file
The above configuration expects an index.js to live in your SRC/js folder (as defined in the build/paths.js).
Let's create that file with the following content:
import './jquery.min.js'
import './jquery.migrate.js'
import './jquery.bxslider.min.js'
import './jquery.appear.js'
import './jquery.countTo.js'
import './bootstrap.js'
As you can see, the index.js just imports all of the files you want to use.
If you now run
npm run prod
from your terminal, a scripts.js file will be created in your DIST folder. You can include that into your markup with a plain ol' <script> tag.
Congratulations, you've got a working webpack setup!
Dive deeper
This mini-tutorial really just scraped the surface of what you can do with webpack. It gives you a pretty solid foundation for your configuration which you now can fill with whatever you need. And that will actually be quite a lot of stuff.
I'll list a few more things you may want to enhance, with some links to read through.
webpack Concepts
If you want to use webpack, it can be hard to do so if you don't know about its underlying concepts. Juho Vepsäläinen created a great guide on getting started with webpack which helped me a whole lot. He's also a webpack core contributor so you can be sure he knows what he's talking about.
Especially loaders are a concept you'll really need to know.
Many of the hints on this list are also explained there.
Read more: SurviveJS – webpack tutorial
Code Splitting
It does what the name's saying: You might not want to pack all your JavaScript into one bulky output file.
It's a job webpack does for you to split off parts of your bundle which you only need on certain pages of your application.
Also, depending on how frequently you're working on your project's JavaScript, it might be a good idea to split off third party code from your bundle for caching purposes.
Read more: webpack Documentation – Code Splitting
Caching
You may want to enhance your site's caching behaviour by adding a hash to your bundled file names which depends on their content. This will create (for example) a script.31aa1d3cad014475a618.js instead of a scripts.js.
That file can then be cached indefinitely because as soon as its contents change, the file name will change as well.
Your PHP code might then use the webpack-manifest-plugin to gain access to the generated file names.
Read more:
Immutable Caching on how to cache your bundles forever
webpack Documentation – chunkhash on how to enrich your bundle file names with hashes
webpack-manifest-plugin on how to generate a manifest.json containing the file names of your current bundle
Transpiling
In case you want to use modern ES2015 code in your site's JavaScript (and are targeting non-evergreen browsers), you'll want to transpile them down to regular ES5. (If the term "ES2015" does not make any sense to you, you're most likely not using it and can ignore this paragraph.)
Read more: babel-loader – A loader that runs Babel on your scripts
CSS
There are webpack loaders for CSS. And Sass. And PostCSS. Whatever you need.
And since you're probably not planning to include your CSS via <script> tags, get to know the Extract Text Plugin to generate actual .css files.
Update: The Extract Text Plugin is very established. However, it's actually a kind of hack: It generates .css files even though webpack only knows JavaScript as its target language.
However, this is no longer true as of webpack 4. There's now a system to define arbitrary module types, including CSS.
Long story short: Expect native CSS support in webpack to replace Extract Text Plugin some time soon.
Hint: Paths
I'll mention this because this was a real pain point for me until I realized how webpack works here:
Be aware that webpack will recognize your url(...) statements and try to resolve them relative to your source files.
This means, your source file public/css/main.css:
body {
background: url('../img/bg.jpg');
}
if your output path is public/dist/css/bundle.css, will be transformed to:
body {
background: url('../../img/bg.jpg');
}
Read more:
style-loader and css-loader – you'll hands down need those.
extract-text-webpack-plugin
Minifying
Update: Since webpack 4 was released in February 2018, this section is rather obsolete. Setting the new mode option to "production" now automatically applies JavaScript minification.
There is a Terser plugin for webpack to minify your JavaScript. Minifying CSS is a feature already builtin to the css-loader plugin mentioned above.
Read more: Terser webpack Plugin
Image Optimization
webpack is a bundler, not a task runner. Thus, image optimization is not a genuine webpack task. You'd probably be better off using an actual task runner or just defining some npm scripts for this.
This does not mean webpack is not capable of doing this. There are plugins for pretty much everything.
Read more:
imagemin can minify images pretty nicely on its own.
imagemin-webpack-plugin will integrate that process into your webpack build chain.
Live Reloading
Your problems with live reloading have a pretty simple cause: a webpack dev server is just a simple Node.js server serving only static files.
For you're case, webpack-dev-server probably is the wrong tool at all. Try webpack-livereload-plugin instead for a live reloader that you can just include via <script> tag.
Read more: webpack-livereload-plugin
Source Maps
Update: As of webpack 4 (released in February 2018), source maps are automatically generated when the new mode option is set to "development".
By all means, use source maps. They'll make your work with bundles so much easier you'll want to cry.
Read more: webpack Documentation – Source Maps
Edge Cases
Usually, all your existing scripts you'll process with webpack should be running just fine.
The only exception that comes to my mind right now would be regarding global entities.
Look at the following code:
function myFunc () {
console.log('I exist!')
}
This code in a plain JavaScript file would make myFunc available everywhere in your JS code. But since webpack bundle code is wrapped inside callback functions (and thus leaving the global scope), there won't be any access to that function anymore.
Third party libraries should not be a problem there, they usually assign their globals to the window object directly, but if you've already written JS code in your project, you should be aware of that.
Automate!
You'll want to automate as much of your workflow as possible.
Consider running npm run prod via a git hook before pushing / after pulling.
Based on the existing vue-templates and and the answer from #Loilo I made a vue template you can install with vue-cli. This template jumpstarts you for a vue application you can extend with or integrate in you existing environment.
npm install -g vue-cli
vue init delcon/webpack-simple my-project
cd my-project
npm install
devwatch:
This template has an additional run devwatch option that watches for filechanges instead of using the webpack-dev-server. This makes it usable for any existing webserver enviroment.
npm run devwatch
dev:
to run it with the default webpack-dev-server, remove <script src="http://localhost:35729/livereload.js"></script> in index.html:
npm run dev
build:
to build your project for production:
npm run build
I'd like to involve jQuery Smart Wizard in my application.
I have update the composer.json and then run composer update.
Here I get the related files in the vendor folder as techlab\smartwizard.
How could I link the css and js file from the twig template?
I have tried to use below command to generate link to the resources.
php bin\console assets:install --symlink --relative
It seems that the command only deal with the folder in resources\Public in each Bundle.
I hope I could use some link as below to get the files.
<link rel="stylesheet" href="{{ asset('bundles/XXX/static//styles/XXX.css') }}">
I know I could create CSS and JS folder under web folder and then copy the related files there. I just wonder if I have to do this manually then why I use composer to install it. I could just download the file and put them in the target folder. That's all.
I am not sure if there is some better way to manage the resource.
Thank you very much for your help.
assets:install command works only if it finds directories/files in Resources/public directory.
I see two options here:
1) create a bundle and add the files in the Resources public directory
2) use bower and install this package as a dependency for frontend.
For this, you may create a `.bowerrc` file to set the
target directory which can be `web/bower`.
Composer is used to manage php dependencies, not frontend ones, except somebody made a package to work with composer and to be integrated in framework.
So, you can use:
1) composer -> php related, backend dependencies
2) bower, npm -> frontend dependencies
I use a precompiler with gulp that manages css, images and js files in the project
Try
php bin\console
To
php bin/console
Where in your command line