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
Related
Problem Background:
I have a tauri app set up in Linux (Pop OS), with sveltekit with vite as the frontend framework, and typescript and SCSS being the languages I code for scripts and styles.
Vite is also hot reloadable.
There's an app.scss for overall styles and components scoped scss defined in each components using the <style lang="scss"> tag
Problem Description:
When I run the pnpm tauri dev command, the built executable will be executed for development debugging.
While the scss file app.scss and some component scss is being loaded, other components scss seems to be not working. (See image below)
Since it is using vite as a dev server, I used a browser to visite the website and see if it is a tauri issu, and the webpage in browser seems to be having different components that doesn't load SCSS as expected. (See imaghe below, the palce holder image should have paddings around it but it doesnt)
When I try to update the SCSS for the components then undo the changes, after hot reload, the scss would work again, so there shouldnt be a mistake in my scss syntax or such.
There's also no error when building the application.
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.
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.
At Codelyzer test file I saw SCSS beeing used in a styles inline template. Is it possible to enable it with Angular CLI?
My SCSS setup is working when using styleUrls but not for direct styles component decorator property.
Update:
I am using Angular CLI 1.0.0 with Angular 4.0.1
This is the error in shown in the WebStorm IDE
Support for inline SCSS in #Component decorator styles field is available from Angular v12
To enable in existing applications add "inlineStyleLanguage": "scss” to angular.json in the following sections
architect.build.options
architect.test.options
For a new Angular CLI project where scss is the selected style the inlineStyleLanguage configuration will default to scss
Unfortunately, (at this moment) it is not possible. From the Angular documentation:
Style strings added to the #Component.styles array must be written in CSS because the CLI cannot apply a preprocessor to inline styles.
https://angular.io/guide/component-styles#non-css-style-files
I'm currently working on a project and Im attempting to load my scss/sass through webpack. I'm currently loading it in successfully using the following libs:
node-sass
sass-loader
css loader
style-loader
I am able to require/import the styles in successfully but the problem occurs that when I load up the application the page loads without the styles for about 1.5 seconds and then after the page "blinks" and the styles finally load in.
Is there a way to get around this through webpack? I have heard of ExtractTextPlugin and a few others but I've tried to implement it by looking at article examples and github examples but they don't seem to work by using require/import where they are needed. I'd like to only require the styles based on my react component needs. Not loading any styles that the components don't need.
You have (at least) two options to prevent this FOUC (Flash of unstyled content):
Use a plugin like mini-css-extract-plugin or extract-text-webpack-plugin to extract the compiled CSS into a separate file that you can load normally in your <head> (read more) or
Hide your content, using CSS, until styles are ready, the loaded styles should contain the styles that will make the content visible.