I am in case I have a public/assets folder that contains style_en.css and style_ar.css and is based on the app locale. Then, I can link the needed one to the blade.
But I want to try laravel mix to compile all CSS files for me. I did remove bootstrap.min.css and replaced it with the css/app.css file, and it works fine.
But I do not know how to have still the two RTL and LTR of the app work fine using mix with my style_en.css and style_ar.css files.
Any help?
Related
I started using Laravel Mix as a Webpack for my web development projects, and so far, I'm finding it a perfect tool for my projects, but I wanted to make some aspects a little more organized; when I minify the CSS file, it minifies the file in the same folder where the example CSS file is:
Before:
stylesheets/main/style.css
After:
stylesheets/main/style.css and stylesheets/main/style.min.css
In this case, I wanted to put the minified files in a folder called minify to look like this.
stylesheets/minify/style.min.css
The Laravel Mix website says that the file is automatically created inside the destination folder of the file, and I would like to change this behavior. Is there any way or some extension that can help me change the file's destination?
Here is my code:
// webpack.mix.js
let mix = require('laravel-mix');
mix
.sass('stylesheets/sass/main.scss', 'stylesheets/main/main.css')
.minify('stylesheets/main/main.css');
// Change destination not working
//.minify('stylesheets/main/main.css', 'my-destination');
I'm using mcamara/laravel-localization on my project everything is working perfectly, but when I'm trying to a layout (ressources/views/layouts) to include all my pages the localization is also affecting my assets, the css ans js files are not loading, it's giving localhost/en/assets/css/style.css instead of localhost/assets/css/style.css. What should I do?
One crazy thing is if I don't use a layout I'm not getting that problem. Help me please.
I am wondering if it is possible to add .scss file in my component in Angular 2?
Let's say I have the following:
#View({
template: `
<div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>`,
styleUrl: ['style.scss'],
directives: [NgClass]
})
Is compiling the scss file to css the only way to achive what I am trying to do?
Thanks
It is possible, but you need to make server able to support this type of files, e.g. compile them on the fly during request, or maybe take precompiled CSS files from cache. In any case, the response when you navigate to
GET /approot/component/path/style.scss
needs to be valid text/css type. By default no webserver is going to do it. It is totally possible with Express, Apache, etc. but it requires configuration.
Another option is to use styles instead of styleUrls and require SCSS with bundlers like webpack:
styles: [require('style.scss')]
Above should work, but the notation is not that nice.
Finally, I would probably go with
styleUrls: ['style.css']
... and use SCSS for development, making sure my watch/build task compiles scss->css and puts style.css just next to style.scss in the same directory (on in the dist, wherever it needs to be). So you work with SCSS and never touch generated CSS, which is there only to be consumed by app.
styleUrls for now must be only css files list, so you need to provide the name of .css file to apply for components, so simple to think about provide the name of compiled .css file from .scss file, I found very helpful link to make that and with very well explained example:
http://www.angulartypescript.com/angular-2-sass/
This even should work in long term, hopefully the angular 2 somehow support the .scss and internally compile it.
I recomend adding scss files through import:
import 'style-loader!./your-scss-file-name.scss';
make sure the file url is correct.
i have the following folder structure
application
assets\
\css
\js
\images
i have all the bootstrap files in the assets folder - css files in the css folder, js files in js folder etc.
My question is this. I have a view that uses the bootstrap.css. I reference it by doing something like:
<script type="text/javascript" scr=<?php base_url()?>assets/css/bootstrap.css> </script>
it find the file just fine. but when i try to use the built in images in bootstrap, they don't display because the bootstrap css is expecting the images to be in
"../img/glyphicons-halfing.png"
But the physical path of the view is something like:
c:\wamp\www\myapp\views\templates\
I guess I could just copy the image folder into the views folder... or i can edit the css to point to the right location. But i just wanted to check to see how others are organizing their folders using codeigniter and bootstrap.
thanks.
It's looking in 'img' - You need to amend it to 'images'
"../images/glyphicons-halfing.png"
Glyphicons goes inside the "assets\font" folder.
Just in case, I'm using CodeIgniter 3.x and Xampp 5.6.x on xubuntu.
assets\
\css\
\js\
\images\
\fonts\
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.woff2
I tried "Galleria" as a standalone application and it works perfectly fine .. however in order to make it work with Cakephp what are the changes that i need to make ?
I have tried changing the path of js and css files to absolute path .. it didnt help ..
// Load the classic theme
Galleria.loadTheme('http://localhost/agm2/js/galleria.classic.js');
and in galleria.classic.js .. changed the following line
css: 'http://localhost/agm2/css/galleria.classic.css',
This is what I did before it finally worked and I of course violated cakephp convensions:
I put all the javascript files (jquery, galleria, galleria.classic) in the cakephp js folder. Additionally, I had to put the images (classic-map.png, classic-loader) and the css file (galleria.classic.css) in the cakephp js folder before it finally worked.
But under normal circumstances, the galleria css file should be in the css folder, the images in the img folder and the galleria.classic.js should be able to locate them and this is the problem we have.