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');
Related
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?
I am using the Laravel framework with npm.
In the scss file i have image path:
background-image: url("../../img/frontend/payments.png");
by compilation when I open the styles.css and look for that image the path is the following:
background-image: url(/images/payments.png?464788fabc66a26cf02344b0dcbcdde2);
How can I change that path, because all my images are in img/ folder.
There is another thing which is bothering me. I need to copy the payments.png in the resources/sass folder, which is copying tha that picture in public/images. So i have the duplicate of each picture. Is it somehow possible to stay all my images in the public/img folder ?
If you're using Laravel mix, the urls change because of the webpack url processing.
You can read more about it in the official documentation.
tldr
mix.options({
processCssUrls: false
});
And about the duplicate resources (like the pictures you mentioned): Keep the original resources in the resources directory and copy them using Laravel mix to the public folder. The reason behind this is sometimes you want to process the resources and then copy them. for example first optimize the png files then copy them to the public folder while keeping the original file in the resources directory.
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.
So I have a file foo.js which contains the following:
$( document ).ready(function() {
alert("hello world");
});
and if I put it to the web/static/js folder then it doesn't get executed, but if I put it to the web/static/vendor folder then it does, so I wonder why it doesn't work from the js folder? And where should I put my js files? The vendor folder doesn't seem to be the right place ...
As phoenixframework is using bruch.io as default.
In it default configuration. There are two javascript folders
web/static/js
web/static/vendor
When you add .js files under /web/static/vendor these files will be put in non wrapped codebase. These files will undergo concatinations and other processes and brunch.io with other js files (which also include files under web/static/js) and then will be put it in priv/static/js/app.js
When you add .js files under web/static/js these files content will be put in wrapped codebase and then these file will undergo concatination with other brunch.io processes like previously mentioned. To reference to these file you need to use require() To require it first then you can use it.
I hope you understand the reasons here. I researched from https://github.com/brunch/brunch-guide/blob/master/content/en/chapter04-starting-from-scratch.md.
And these configuration can be overriden in the file brunch-config.js or brunch-config.coffee in the phoenixframework geterated folder content.
It turns out that when you add new files to the js folder, you have to require it either in your html file or in app.js, that's one of the brunch's features
I am using sass with prepros compiler and sublime editor. I need to have each scss file complied with the same file name.
For example:
I currently have-
header.scss
content-top.scss
footer.scss
and they are all compiles into style.css to create one full style sheet.
I wish to have a style folder with
header.css
content-top.css
footer.css
which will be done automatically when saving and compiling like I normally do.
How can I accomplish this?
Thank you
Check this link out.
It states that you can adjust your project structure (in your case CSS folders) in project settings.
If I remember correctly you may have to buy it so that you can compile more than 4 or 5 Sass files, but I may be wrong.
Also check that you aren't "only" importing sass partials because of this:
Any Sass and Scss file (i.e. including partials) imported by another
file are not shown in the files list but they are still watched by Prepros.
The parent file is re-compiled whenever any of the imported files are changed.