sass 相关问题

Sass（Syntactically Awesome Style Sheets）是CSS的扩展，添加了嵌套规则，变量，mixins和类扩展等功能。这使开发人员能够编写结构化，可管理且可重用的CSS。 Sass被编译成标准CSS。

如何在 Angular 18 和 Material 3 中使用 Roboto 以外的字体

我刚刚开始使用 Angular 3 并解决了错误。但是，我在尝试让不同的字体和版式正常工作时遇到问题我刚刚开始使用 Angular 3，并解决了错误。但是，我在尝试让不同的字体和版式正常工作时遇到问题 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>StateLineRodz</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-typography mat-app-background"> <app-component-test></app-component-test> <app-root></app-root> </body> </html> 我的风格.scss @use '@angular/material' as mat; $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$blue-palette, tertiary: mat.$magenta-palette, ), ) ); html,body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } :host { display: flex; flex-direction: column; align-items: flex-start; } 角度.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "stateLineRodz": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/state-line-rodz", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "2kB", "maximumError": "4kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "stateLineRodz:build:production" }, "development": { "buildTarget": "stateLineRodz:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] } } } } }, "cli": { "analytics": false } } 当我加载页面时，我总是得到相同的字体我尝试使用不存在的字体加载页面，但没有成功，只需编译并说“确定” 我没有更多线索来猜测这个东西。首先确保将 font 添加到 index.html。 ...  <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Open+Sans:wght@300&display=swap" rel="stylesheet" /> </head> 在此之后，在styles.scss中，您必须首先定义typography-object。有效值为。 _config-validation.scsss $allowed: ( brand-family, plain-family, bold-weight, medium-weight, regular-weight, use-system-variables, system-variables-prefix ); 然后将此定义映射到 define-theme、typography 属性，如下所示。 $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); 即使在这些更改之后，您也不会看到正在应用的类型，我们必须调用方法 mat.typography-hierarchy 将版式应用到组件。 @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! 完整代码： @use '@angular/material' as mat; $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } html { height: 100%; } @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! Stackblitz 演示

angular sass angular-material material3 angular-material-theming

回答 1 投票 0

如何在 Gulp Sass 任务中消除弃用警告 - “旧版 JS API 已弃用，将在 Dart Sass 2.0.0 中删除。”

我当前的安装如下：节点 - v20.18.0 Gulp - v5.0.0 Gulp-Sass - v5.1.0 Sass - v1.80.6 我的 gulpfile.js： const gulp = require("gulp"); const sass = require("gulp-sass...

sass gulp gulp-sass

回答 1 投票 0

如何制作一个与 CSS 中其他元素交互的固定元素？

我想将图像放置在页面底部，比如说顶部：70%。无论上面添加多少元素，图像都不应该受到它们的影响。图像应该只是...

html css sass

回答 1 投票 0

如何在角度中设置 ngx-bootstrap 组件的样式？

我想更改导航链接样式这是我在 my.component.scss 中的尝试标签集{ 一个{ .nav-链接{ 背景：#FFFFFF；边框：1px实线#DDE6FB；边界-...

css angular sass ngx-bootstrap

回答 3 投票 0

如何在SCSS中使用CSS round()，它也有round？

有人在SCSS中使用我的CSS库，当我使用round()时，它给出了这个错误。 jquery.terminal.css:850:22": 参数 $number of round($number) 必须是一个数字根据 MDN 轮次在