sass 相关问题

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

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">  <div id='map'></div> </section> 这永远行不通： <section class="map_box_container"> <div class="second_child">  <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">  <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 地图。

jquery sass responsive-design css-grid mapbox-gl-js

回答 10 投票 0

在scss模块中导入Bootstrap组件

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

reactjs next.js sass nextjs14

回答 1 投票 0

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

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

angular sass angular-material material3 angular-material-theming

回答 1 投票 0

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

<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 演示

html css angular twitter-bootstrap sass

回答 1 投票 0

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

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

sass rollupjs

回答 1 投票 0

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

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

sass angular-material2 angular5

回答 4 投票 0

如何使用 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 ); 因此在顶部定义相同的属性名称$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 sass angular-material material3 angular-material-theming

回答 1 投票 0

如何在 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 轮次在