sass 相关问题

Scss @use 在多个文件中使用一致的 `with` 参数

我对 scss 中的 @use 和 @forward 规则仍然很陌生，所以我可能有点误解，希望得到一些帮助。 我有一个为供应商库设置配置的文件：uswds-theme...

粘滞按钮粘在左侧占据整个宽度？

您好，我有一个按钮粘在左下角，但由于某种原因占据了整个空间。评论显示：flex和flex-direction：.todo-list中的列不允许加号按钮...

Flexbox 容器内的内容不显示内联链接

我对 Flexbox 相当陌生，但似乎无法在这里找到答案。我有一个 标签，我已将其制作成弹性容器，并且在 中我想插入一个链接... 我对 Flexbox 相当陌生，但似乎无法在这里找到答案。我有一个 <p> 标签，我已将其制作成弹性容器，并且在 <p> 中我想插入一个与文本内联的链接。 所需结果： 但是我得到的结果是这样的： 我可以获得预期结果的唯一方法是将 <a> 标签的显示属性更改为“内容”，但是快速查看 CanIUse 显示 IE 不支持它，我需要它来完成此任务。 我也不想重构 HTML，因为这是要以所见即所得的方式呈现，并且简单地将类添加到 <p> 标签将是最好的方案。 我已经在这里笔写了这个问题，用的是scss版本，编译后的代码也贴在下面。任何帮助都会很棒。 .my-alert { width: 500px; padding: 10px; border: 5px solid; font-weight: bold; display: flex; justify-content: start; align-items: center; font-weight: 900 !important; } .my-alert:before { font-family: 'Font Awesome 5 Free'; font-size: 40px; display: flex; align-items: center; padding-right: 20px; font-weight: 900 !important; } .my-alert-success { color: green; border-color: green; } .my-alert-success:before { content: '\f058' }<p class="my-alert my-alert-success">Quam diu etiam furor iste tuus nos eludet? Excepteur sint obcaecat cupiditat non proident culpa.<a href="/">Here is my link.</a> And here is more content.</p> 不要在这里使用display:flex，因为它会将其容器内的所有元素视为“块”。 .my-alert { width: 500px; padding: 10px; border: 5px solid; font-weight: bold; /*display: flex; */ padding-left:40px; justify-content: start; align-items: center; font-weight: 900 !important; float:left; position: relative; &:before { font-family: 'Font Awesome 5 Free'; font-size: 40px; display: flex; align-items: center; padding-right: 20px; font-weight: 900 !important; position:absolute; left:8px; top:50%; transform:translateY(-50%); } } .my-alert-success { color: green; border-color: green; &:before { content: '\f058'; } } 只需为 display:contents 标签添加 <a> 即可。 .my-alert { display: flex; } .my-alert a { display: contents; } ..弹性容器的子级被迫具有块风味 显示类型。

css ::元素高度不起作用

我有一个 Next.js 应用程序，其中有五个具有相同 SCSS 类和高度的按钮。但是，一个按钮中 ::after 元素的高度不同，我不知道为什么。 SCSS类： .下划线-b...

SASS 从最后一个元素中选择最后一个元素

我很难向最后一个 class="list-group" 中的最后一个 class="separator" 添加边框。 我想在 SASS 中执行此操作。有人可以帮助我吗，因为我的解决方案不起作用。 超文本标记语言 &l...

如何在 Angular component.scss 文件中使用 SCSS mixins？

你好吗？ 如何在 Angular 组件中使用 scss mixin？ 语境 我在 /src/styles/_mixins.css 中为我的 scss mixins 创建了一个文件，并将这个 mixins 文件导入到全局样式文件 sty...

文本-图像部分顶部的定位叠加问题

我在将覆盖层放置在文本图像部分顶部时遇到问题。我试图在附图中形象化预期的结果。覆盖层（蓝色）应位于顶部，没有

MUI 免费主题仪表板存在许多错误

我正在尝试使用 React、MUI、SASS 和 typescript 创建一个新的前端项目，并使用 MUI 建议的仪表板模板（https://mui.com/material-ui/getting-started/templates/）。为此，我使用了...

Angular (18) Material Tooltip - 如何添加/自定义边框？

截至此问题发布，我正在使用最新版本的 Angular 和 Material。 我设法更改工具提示的背景和文本颜色，覆盖这些变量： --mdc-普通-

Mapbox-gl 高度 100%

Mapbox 不适合它的容器。为什么不呢？ 这是渲染后的 html： Mapbox 不适合它的容器。为什么不呢？ 这是渲染后的html： <div class="map mapboxgl-map" id="mapBox"> <div class="mapboxgl-canvas-container"> <canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277"> </canvas> </div> </div> 那些 277px 我猜是默认值。 这是js： mapboxgl.accessToken = 'blabla'; var map = new mapboxgl.Map({ container: 'mapBox', style: 'mapbox://styles/mapbox/streets-v11', center: [-77.04, 38.907], zoom: 11.15 }); 这是scss： .map { grid-column: 1/-1; height: 100%; position: relative; canvas, .mapboxgl-canvas { height: 100%; } } 如果我将著名的 !important 添加到 height: 100%; 那么它可以工作，但地图会被拉伸。 我该怎么做？ 我找到了窍门。 只需添加 map.on('load', function () { map.resize(); }); 到 js，这样地图就会根据其容器调整大小 经过几个小时的尝试找到解决方案并在 SO 上尝试解决方案后，我终于明白了如何使 Mapbox 适合其容器。要使 mapbox 适合其容器，而不需要设置绝对高度，它必须是父 div 的直接第一个子级。 Mapbox 不能是第二个、第三个或第四个孩子等。为什么？我的猜测是 mapbox-gl.css 与自定义 CSS 规则发生冲突。 这每次都有效： <section class="map_box_container"> <!--MAP--> <div id='map'></div> </section> 这永远行不通： <section class="map_box_container"> <div class="second_child"> <!--MAP--> <div id='map'></div> </div> </section> CSS .map_box_container{ position: relative; height: 100% !important; width: 100% !important; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } 2021 年更新 我在一个新项目中使用mapbox，据我了解，mapbox 不需要其父容器具有任何CSS 才能工作。 HTML <section class="map_box_container"> <!--MAP--> <div id='map'></div> </section> CSS #map { position: absolute; top: 0; bottom: 0; width: 100%; } 这对我有用，并且在调整大小之前您不会像在接受的答案中那样看到明显的滞后： document.addEventListener("DOMContentLoaded", () => map.resize()); 将其添加到你的CSS中 .mapboxgl-map { position: absolute; top: 0; bottom: 0; width: 100%; } 和 { position: relative } 到其父 div 这个对我有用。虽然需要一段时间才能生效，但这是值得的。 map.on('load', function() { $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); map.resize(); }); 没有绝对定位的纯 CSS 解决方案。 新方法： 添加到你的包装纸中： aspect-ratio: 1 / 1; 如果您想要一个矩形，请使用该值（例如：.9）。 旧方法： 每个父级的高度必须大于 0。请检查您的开发检查器。对于每个渲染高度为 0 的容器添加 height: 100%;。然后为您的地图包装器添加这两个 CSS 声明： height: 100%; max-height: 500px; 将 500 更改为在您的媒体查询中有效的任何内容，您应该会很好。 const [viewport, setViewport] = useState({ width: '100%', height: 'calc(100vh - 162px)', // 162px is size height of all elements at the top of the map latitude: 0, longitude: 0, zoom: 12, bearing: 0, pitch: 0, transitionDuration: 2000, transitionInterpolator: new FlyToInterpolator(), }); 2022 1- 更新您的地图脚本添加 map.resize() <script> map.on("load", () => {map.resize() </script> 2- 更新您的 html 添加 tailwind class="aspect-square w-full h-full" 或添加 style="aspect-ratio: 1 / 1": <div id="map" class="aspect-square w-full h-full" style="aspect-ratio: 1 / 1;" > </div> 对于使用react-map的人（也许还有其他人），这是我解决问题的方法： <div className="flex flex-col min-h-screen" /> <h1> Hey!</h1> <Map style={{ width: '100vw', height: 'inherit', flexGrow: 1 }} /> </div> 对我来说，关键是通过将其设置为继承来杀死 Mapbox 中的 height: 100%。 注意：我使用的是 Tailwind。 我发现的唯一可靠的方法是使用 jQuery。就我而言，地图位于页面加载时不活动的选项卡中，因此我在切换到保存地图的选项卡时执行代码。 var $ = window["$"]; $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); 编辑：这可行，但地图看起来很丑而且像素化。我可能会回到 Google 地图。

在scss模块中导入Bootstrap组件

我可以在 Nextjs 项目中执行以下操作吗？ 我有一个 global.scss 文件，在其中导入必要的 Bootstrap scss 文件，但我不想加载所有内容，仅在需要时才加载，例如当我

在单个网络应用程序中拥有多个主题的最佳实践是什么？覆盖或第二主题

我有一个为我创建的应用程序 https://stackblitz.com/edit/angular-gjkbqm-schlk9?file=index.html 这个应用程序展示了如何正确使用主题，这里给出了解释 我如何使用...

引导折叠导航栏切换按钮不起作用

<div class="container-header"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" [routerLink]="['/home']" routerLinkActive="active"> <img src="/assets/images/Logo.png" class="img-logo"> </a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" [routerLink]="['/home']" routerLinkActive="active">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" [routerLink]="['/eventi']" routerLinkActive="active">Eventi</a> </li> <li class="nav-item"> <a class="nav-link disabled" (click)="userArea()">Sezione Admin</a> </li> </ul> </div> </nav> </div> .container-header { height: 100%; display: flex; flex-direction: row; .bg-dark { width: 100%; .nav-link { border: 1px solid red; color: white; border-radius: 9px; margin-left: 10px; margin-right: 10px; } .nav-link.active { border: 1px solid rgb(255, 255, 255); color: white; border-radius: 9px; } } .navbar-brand { img { aspect-ratio: 1/1; height: 5rem; } } } 我正在开发一个 Angular 项目，并且安装了 bootstrap。一切正常，因为我正在导入引导程序组件。但主要问题是，当我切换到智能手机视图并且显示导航栏的切换按钮时，当我单击它时它不会执行任何操作。 我在这里检查了其他解决方案，但没有解决这个问题 <div class="main-container"> <div class="header-container"> <app-header></app-header> </div> <div class="page-container"> <div class="router-container"> <router-outlet></router-outlet> </div> </div> 标题位于应用程序组件内部，因此它会自动出现在每个页面中。这是CSS： .main-container { display: flex; flex-direction: column; height: 100vh; width: 100%; .header-container { height: 8%; width: 100%; color: white; text-align: center; } .page-container { flex: 1; width: 100%; overflow: auto; .router-container { text-align: justify; height: 100%; } } } 以下是存在此问题的页面示例： <div class="home-container"> <div class="home"> <div class="home-title"> TITLE </div> <div class="home-banner"> <div class="banner-text"> .home-container { display: flex; flex-direction: column; width: 100%; .home { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; .home-title { font-size: 32px; font-weight: 600; font-family: General; font-weight: semibold; height: 20%; @media (max-width: 768px) { font-size: 24px; } } .home-banner { margin-top: 15px; width: 70%; height: 16rem; display: flex; justify-content: center; align-items: center; border-radius: 6px; border: 2px solid #9E0B0F; background-image: url('../../../../public/assets/images/banner.jpg'); background-size: cover; @media (max-width: 768px) { width: 90%; height: 12rem; } .banner-text { padding: 20px; font-size: 22px; font-weight: 400; color: rgb(255, 255, 255); font-family: General; width: 90%; height: 80%; align-content: center; background: rgba(161, 157, 157, 0.15); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 10px; @media (max-width: 768px) { font-size: 14px; padding: 8px; } } } 需要配置data-bs-toggle="collapse"和data-bs-target="#navbarTogglerDemo01"，可以查看官方文档 Bootstrap - 导航栏示例 ... <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> ... 完整代码： main.ts import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; @Component({ selector: 'app-root', standalone: true, template: ` <div class="container-header"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" > <img src="/assets/images/Logo.png" class="img-logo"> </a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" >Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" >Eventi</a> </li> <li class="nav-item"> <a class="nav-link disabled">Sezione Admin</a> </li> </ul> </div> </nav> </div> `, }) export class App { name = 'Angular'; } bootstrapApplication(App); index.html <!DOCTYPE html> <html lang="en"> <head> <title>My app</title> <meta charset="UTF-8" /> <base href="/" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <app-root>Loading...</app-root> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" ></script> </body> </html> Stackblitz 演示

插件 rollup-plugin-sass：错误：找不到要导入的样式表

我对 @carbon/theme 和 rollup-plugin-saas 插件有疑问。 [!]（插件 rollup-plugin-sass）错误：找不到要导入的样式表。 ╷ 6 │ @use '@carbon/themes'; 看起来像r...

使材质表列的内容动态宽度

经过大量修改，我终于为我的材质表有了一个不错的设置。 它有分页，有排序，有我需要的所有东西。 然而，它看起来不太好，因为我的几个colu...

如何使用 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。 ... <!-- custom font --> <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 ); 因此在顶部定义相同的属性名称$typography-config。 $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! 然后将此定义映射到 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 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。 ... <!-- custom font --> <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 演示

如何在 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...

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

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

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

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