I'm trying to use scss styles inside a blade file. but I can't find a propper way to do that.
{{-- header.blade.php --}}
<header id="mainHeader">
<style lang="scss">
.a1 {
color: red;
> .a2 {
font-size: 20px;
}
}
</style>
<div class="a1">
this is a1
<div class="a2">this is a2</div>
</div>
</header>
is there any way to do this?
there is no support for this, you can't compile SCSS from blade templates. Unless you write/use some sort of Plugin for laravel-mix.
In real is just the wrong way to go about it.
I would suggest using normal css in blade.
Sadly, it doesn't seem to be possible within blade.
Vue uses the same setup, where self contained ui components hold html, js and css. Which makes for a very modular system if you plan it correctly.
I've been looking to do something similar to this and just wanted to give anyone in the future a point in the direction I took.
My use case was a little different, we run a bunch of different websites through a tenancy platform and wanted to utilise SCSS to make customisation of the templates easier.
We essentially use blade to create the scss plaintext, and then to compile we use a library called SCSSPHP (https://github.com/scssphp/scssphp/).
When somebody updates their settings on our system, we re-compile their scss for them.
Related
I'm playing around in Tailwind and this video suggests that you can avoid the repetition of Tailwind classes by using Sass like so:
HTML
<button class=but>Button</button>
SASS
.but {
#apply bg-green-400 p-5 rounded-lg m-5 text-white
}
...but this isn't working for me; the styles don't get rendered and Codepen's CSS editor complains about a new line being expected. Here's my pen - it has Tailwind and Sass active.
What am I doing wrong?
You're using CDN Tailwind which cannot support a lot of features #apply included - it simply cannot generate your class on the fly
Documentation says
Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.
You can't customize Tailwind's default theme
You can't use any directives like #apply, #variants, etc.
You can't enable additional variants like group-focus
You can't install third-party plugins
You can't tree-shake unused styles
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
I've found some problems similar to mine, but nothing close enough for me
I've built a blog-site using NuxtJs with Vuetify and have deployed it on Netlify. The site looks and works great for the most part. My site has a navigation drawer that is supposed to have a background-color of #659dbd. This color shows up in development. However, on the deployed site, the background-color is white. When I inspect the site in my dev tools, this color does show up in the styles, but it has a line through it, like this:
Does anyone have any idea what could be causing this?
I've looked at the Netlify gotchas, but couldn't anything regarding anything like this.
It's strange because all of my other stylings render fine.
If I've left anything out or if you need to see any code, let me know.
This happens because you probably using nuxt/vuetify module, and for development it use builded vuetify bundle, but for production it use treeshake version. And with treeshaken version of vuetify it do load css dynamically on page. So first loaded your page style, adn then vuetify load its own component styles and it overrides your own styles
There's probably some other more specific rule.
<div class="list">
<div class="drawer"> Item </div>
</div>
<style>
.list {
background-color: #4589e0;
}
.drawer {
background-color: #1707a3;
}
.list .drawer {
background-color: #a3073b;
}
</style>
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
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.