I'm starting a laravel vuejs project, and for the moment I plan to make 1 page = 1 component (time constraint).
I have a lot of css files for each page, and I reduce them with LaravelMix (Webpack).
When in the component I put <style scoped> but I import a css file, it doesn't respect the scope. While when I put raw css, it respects the scope.
Would you have a solution so that I can link a css file (after compilation laravelmix) and it can be scoped to the component ?
Thanks in advance,
Feel free to ask if you have any questions,
Kylian
I found a solution, but not the best
With that :
But this is not the compiled css from webpack in public folder
Related
I'll love if you can help me with a problem.
I'm developing a task app (just to practice) and I started with the styles using SASS.
Just to validate that the SASS is running I added a body background color, but this style does not applying for all views.
When I saw the console to see the html structure, I noticed that some views doesn't have the html structure from the application.html.erb, just the html that I have in that file.
NOTE: I have the style applied in a main.scss file, where all the files should have the style.
This is the root route
This is another view, where the style is applied
EDIT: I found the next message when inspect the element, but I don't know why is this happening
We're using the Angular flavor of Material 2 (https://material.angular.io/) for a main project, but would like to create a separate static (HTML/CSS) prototyping workspace that is able to access just the Material 2 CSS styles from that main project. The idea is that this separate directory will pull the compiled CSS from the Angular project, but allow for experimentation in HTML/CSS styling without configuring any JS.
Is it possible to compile the full CSS (components, typography, etc.) from the Angular Material 2 project, without needing AngularJS? It seems like there are styles being inserted by JS using the <style> tag.
Here's a basic demo of the SCSS file I've tried to build to load the Material styles:
#import "~#angular/material/theming";
#include mat-core();
This works for adding things like typography and the class names, but it doesn't add all of the possible styles for those classes. For example, the card component only gets very basic styles—it's missing the other styles such as padding that seem to be injected via JS.
I also tried the material-components-web project, which has compiled CSS here. It comes very close to doing the job. But unfortunately just renaming .mdc- to .mat- is not enough. The component names and usage aren't quite the same.
For example, material-components-web uses BEM: mdc-card__actions.
Whereas the Angular versions calls it .mat-card-actions.
Today I've started using ionic 3 for the first time. I don't really know anything about it, so that's why I wanna learn how it works.
I've created a sidemenu project and now I want to add some global styling in my app.scss, so I can use it in any page of my project. Well, I've added simple styling to my app.scss but nothing happens on my page. Everything still looks the same. Now my question is: Do I have to import the app.scss somewhere? If so, where? Or how can I use the app.scss?
I thought it would happen automatically, that my page uses also the classes of my app.scss and not only of it's own stylesheet, but to me it seems like it doesn't even know the classes of the app.scss.
within the app.scss you can create class use them normally as class="class-name" on html.
Hope I helped you.
You can just use it, no need to import it anywhere. A few things to keep in mind though:
There are things you would like to add at a global scope like for example if you want to enable newlines in toast messages you add the following:
.toast-message {
white-space: pre-line;
}
If you want to add something only for iOS you add it as a sub element of the ios class:
.ios {
... // your iOS-specific css rules
}
If you want to add somehing only for Android (material design) you add it as a sub element of the md class:
.md {
... // your android-specific css rules
}
An there is also a wp class for windows phone if you should need it.
Make sure you have a look at ionics theming docs.
I've searched this question but cant fnd the right question I'm asking about.
I have an MVC project and there's some auto-generated css files that I dont use. I have a scss folder with a file a .scss file called _main-style.scss.
I have a another file that references these sheets, and I use
#import 'sections/main-style';
I'm following the same naming convention as the others.
I even right clicked and did compile. When I run on the browser, it still doesnt update. I inspect the element and the classes dont exist. It's like its not getting them at all.
Can someone help?
Thanks in advance.
From your description, seems like you know about scss and how to compile it to css.
I have an MVC project and there's some auto-generated css files that I dont use.
BUT, What do you mean by this?
Normally if you compile scss to css, and if that css is already linked with your document, It should update automatically
Turns out it needed a hard refresh
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.