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
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 have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
I'm trying to use SCSS to style my elements in vue-native project. I just created a fresh project and ran it with Expo and it ran just fine. Then in my App.vue I tried to change <style> to <style scoped lang='scss'> and my app crashed.
I didn't find anything about SCSS in vue-native documentation. So I tried to follow the vue.js docs, I installed sass-loader with npm install -D sass-loader sass, installed fibers... and my app couldn't compile.
So does vue-native support working with SCSS at all? And if it does - how? What did I do wrong?
Vue native is just a wrapper for React Native. React Native doesn't support CSS or SCSS as it has its own StyleSheet system as you are writing native code and styling.
In response to your comment, vue native compiles css-like styles to react native styling, so you can still use vue-native instead of directly writing JS!
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.
We are currently migrating a hybrid application from a selfmade framework to ionic 2. In the old app we had multiple sass files that compiled into a singe css file containing different themes that were applied to the app by switching a class on the body (like ".skin-red").
Is there a way to achieve that with the $varaiables map of ionic or will i have to create multiple style files with a custom written task and change the used css file at runtime with js code? (which i'd rather not do)
Follow this User-Selected Style Themes in an Ionic 2 Application tutorial.
Or you can set all colors using ts variable and update color hash code run time.
HTML:
<ion-header>
<ion-toolbar color="primary" [style.background]="headerBackground">
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
TS:
public headerBackground = '#ddd';
Should be shared variable.