VueJS/Tailwind CSS/VITE: 환경 변수를 Tailwind 테마 색상으로 사용

Vite, TailwindCSS 및 postcss가 포함된 VueJS 설정이 있고 코드가 배포되는 위치에 따라 다양한 색상 테마를 적용할 수 있도록 .env.name 파일의 변수를 사용하여 다양한 색상을 정의하고 싶습니다. VITE_COLOR="FF0000"이 포함된 .env 파일을 사용하고 tailwind.config.js...theme:{colors:{primary:import.meta.env.COL에서 가져오기를 시도했습니다.

P粉174151913 2023-08-26 14:31:22 0  1  495

VueJS에서 JS 정의 이름을 CSS 변수로 사용하는 솔루션입니다.

저는 각 테마 색상에 대한 CSS 변수를 생성하는 Vuetify를 사용하고 있습니다(예: --v-theme-primary). CSS에서 색상을 --v-theme-{something}으로 설정하고 JS에서 {something} 값을 가져오길 원합니다. 예: Asdconst color = ref("primary").color-text {배경색: var(--v-theme-[[

P粉333395496 2023-08-03 20:20:26 0  1  659

CSS 사용자 정의 속성을 효과적으로 사용하는 방법은 무엇입니까?

저는 응용 프로그램에서 10가지 Tailwind 스타일 색상 변형 세트를 생성하는 데 사용하는 기본 색상을 사용자가 선택할 수 있는 사용자 정의 테마가 있는 응용 프로그램을 개발 중입니다. 저는 색상을 생성하고 이를 DOM에 삽입하기 위해 자바스크립트를 사용하고 있지만, 조사를 통해 DOM은 컴파일된 CSS에만 액세스할 수 있기 때문에 scss 변수를 삽입하는 것이 불가능하다는 사실을 발견했습니다. 따라서 scss 색상 대신 CSS 사용자 정의 속성을 사용해야 했습니다. 나는 이것이 scss가 색상과 함께 작동하는 방식이 아니라 특...

P粉384366923 2024-01-16 19:00:56 0  1  413

android - 코드를 통해 도형의 획 색상을 제어하는 ​​방법은 무엇입니까?

1. 이것은 xml 스타일 파일입니다: {code...} 2. searchView에서 이 스타일을 사용하십시오 {code...} 3. 요구 사항에 관해서는 이제 획 색상을 코드에서 제어해야 합니다. 스타일은 동적으로 변경할 수 있습니다. 색상은 color.xml에 존재하지 않으며 테마를 사용하여 변경할 수도 없습니다.

習慣沉默 2017-06-27 09:19:00 0  2  1052

VSCode(CSS): 색상 목록을 사용하여 # 작성할 때 표시되지 않는 효과를 얻기 위한 솔루션

방금 VSCode(버전: 1.81.1(유니버설 버전))를 업데이트했습니다. 이 업데이트 이전에는 CSS를 작성하는 동안 "#"을 입력할 때마다 프로그램이 색상 목록을 트리거했습니다. 먼저 내 코드에 사용된 색상, 그 다음 기본 색상에 대한 제안이 표시되었습니다. 이제 색상을 선택해야 하는 변수에 있지 않으면 목록이 나타나지 않으며 ":" 입력을 마친 후에만 목록이 작동합니다. 문제를 이해하는 데 도움이 되도록 몇 가지 스크린샷을 첨부했습니다: (https://i.stack.imgur.com/9Ql...

P粉677684876 2023-08-15 14:30:48 0  1  674

Vue 3 애플리케이션에서 동적 CSS 시스템을 만드는 방법은 무엇입니까?

저는 다양한 클라이언트가 사용할 응용 프로그램을 개발 중입니다. 하지만 "테마"는 클라이언트의 색 구성표가 독점적이고 기밀로 간주되기 때문에 클라이언트 간에 공유할 수 없습니다. 물론 이것이 터무니없게 들릴 수도 있습니다. 이제 <stylescoped> 대신 <style> 없이 기본 App.vue 구성 요소에 색상이 정의되고 다운스트림 구성 요소의 범위가 모두 지정됩니다. 현재 작동하는 방식은 CSS 변수를 사용하여 색상과 그라데이션을 정의하는 것입니다. 나는 의사 코드와 같은 작업을 수행하는...

P粉826283529 2024-01-07 19:49:37 0  1  560

javascript - antd 맞춤 테마 색상을 수정하지 못했습니다.

공식 웹사이트의 지침에 따라 package.json 파일에 다음 코드를 추가하세요. 페이지 테마 색상은 변경되지 않았습니다. . 말해주세요, 감사합니다

巴扎黑 2017-07-05 11:06:54 0  1  1142

CSS 색상 변수에 투명도를 적용하는 방법은 무엇입니까?

CSS 변수에 액세스할 수 있도록 전자로 앱을 디자인하고 있습니다. vars.css에 색상 변수가 정의되어 있습니다: :root{--color:#f0f0f0;} 이 색상을 main.css에 사용하고 싶지만 일부 투명도를 적용하고 싶습니다. #element{배경:( 어떻게든 var(--color 사용) ) 및 일부 투명도 설정);} 어떻게 해야 합니까? 전처리기를 사용하지 않고 CSS만 사용합니다. 나는 순수한 CSS 답변을 선호합니다

P粉348088995 2023-08-20 18:51:07 0  1  480

밝은/어두운 테마의 변수에서는 선형 그래디언트가 작동하지 않습니다.

저는 개인 웹사이트(https://cooperativedoilylivedistro.elliott23.repl.co)를 작업 중입니다. 이 웹사이트에는 선호도에 따라 밝은 테마와 어두운 테마가 있습니다. 문제는 선형 그래디언트를 변수로 설정하면 작동하지 않고 전체 배경이 흰색으로 변한다는 것입니다. 이것이 바로 HTML, CSS, JS입니다. 무슨 일이 일어나고 있는지 알고 싶다면 브라우저에서 웹사이트를 확인하세요. <!DOCTYPEhtml><htmllang="ko"&

P粉190443691 2024-03-29 13:28:10 0  1  388

javascript - vue 요소에 스타일을 추가하는 방법

주요 문제는 $index에 인덱스를 전달할 수 있고 처리하기 쉽다는 점입니다. 현재 tr에서 렌더링되는 데이터 행을 어떻게 알 수 있습니까? 내 코드:

大家讲道理 2017-05-16 13:45:12 0  3  846

VSCode ID 속성을 사용자 정의하는 방법은 무엇입니까?

저는 최근에 Atom에서 VSCode로 옮겼으며 대부분의 편집기를 원하는 대로 사용자 정의했지만 여전히 제가 좋아하는 Atom 기능 중 일부가 누락되었습니다. 그 중 하나는 Atom의 "id" 속성이 #99FFFF와 같은 특정 색상이었다는 것입니다. 테마를 살펴봤지만 id 속성 색상을 다른 테마와 다르게 만드는 테마를 찾을 수 없습니다. 제가 좋아하는 또 다른 기능은 새로운 HTML 요소를 생성할 때입니다. 기본적으로 가장 일반적으로 사용되는 기본 속성이 포함된 div입니다. Emmet 조각을 사용하는 방법이 익숙...

P粉709644700 2024-03-31 14:13:45 0  1  726

Ag-Grid: 행의 데이터를 기반으로 하는 대신 타이머를 사용하여 행 스타일을 지정할 수 있습니까?

잠시 후 행의 배경색을 변경해야 합니다. 그리드에 시간(초)이 있는 열이 있는데 해당 시간의 50%가 경과한 후에 행 색상을 변경해야 합니다. 그리드 자체의 데이터는 변경되지 않으므로 규칙에 따라 평가할 데이터를 트리거하는 데 변경 사항이 없으므로 rowClassRules를 사용하는 것은 작동하지 않는 것 같습니다. 대신 setTimeout() 함수를 지연과 함께 사용하려고 생각했지만 CSS 클래스를 rowNode에 적용하기 위해 setTimeout 블록 내부에서 수행되는 작업을 파악할 수 없었습니다. 행 자체의 데이터를 변경하고 ...

P粉277824378 2024-04-03 20:14:05 0  1  567

SCSS를 사용하여 기본값 및 CSS 변수 생성

웹사이트 스타일링을 구현하고 있습니다. 레거시 지원상의 이유로 적어도 한동안은 IE11을 지원해야 합니다. 작업 흐름과 제정신의 이유로 가능할 때마다 CSS 변수를 사용하고 싶습니다. 나는 이 솔루션을 조사한 결과 작동하는 것을 생성하지만 사용하기에는 다소 장황합니다. 내 목표는 CSS 변수로 즉시 덮어쓰여지는 하드코딩된 값으로 끝나는 것입니다. 이렇게 하면 모든 사람을 위한 기본 테마를 추가하고 CSS 변수를 지원하는 브라우저에 대해 다른 테마(예: 어두운 모드)를 추가할 수 있습니다. 분명히 이 모든 것을 직접 작성할 필요는 없...

P粉295616170 2024-04-06 17:46:54 0  1  654

사이트에 CSS 스타일이 적용되지 않음

Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경이 변경되어 전환 효과가 나타납니다. 이것부터 이것까지 되어야 합니다. 그런데 사이트의 배경색을 임의의 색상으로 변경하려고 하면 변경사항이 사이트에 나타나지 않기 때문에 HTML에 연결된 CSS에 문제가 있을 수 있다고 생각합니다. @importurl('https://fonts.googleapis.com/css2?family=P

P粉613735289 2024-04-06 17:12:23 0  1  671

Nuxt 및 Vue 소셜 채팅

Nuxt 앱에 Vue 소셜 채팅 모듈을 설치했지만 소품과 색상 설정이 어떻게 작동하는지 이해할 수 없습니다. 현재 Whatsapp 아이콘이 검은색으로 표시되고 상단 표시줄이 말풍선 안에 있지만 모든 것이 잘 작동하고 있습니다. Nuxt.dll에서 이 설정을 어떻게 변경합니까? 저자는 CSS 변수를 사용하라고 하는데 이 변수를 어디에 넣어야 할지, 코드에서 어떻게 사용하는지 모르겠습니다. Nuxt에는 App.vue도 없어서 모듈을 직접 가져왔는데 작동하는 것 같긴 한데, 제대로 하고 있는지 잘 모르겠습니다. 이게 내 현재 데프야

P粉993712159 2024-03-26 20:55:20 0  1  503

동일한 라이브러리를 두 번 사용할 때 마이크로 프런트엔드에서 CSS를 분리합니다.

여러 개의 마이크로 프런트엔드 반응 애플리케이션이 있습니다. 모든 애플리케이션은 기술에 구애받지 않습니다. 즉, 모든 애플리케이션은 모든 라이브러리를 종속성으로 가질 수 있습니다. 그들은 webpack 모듈 통합 플러그인을 사용하고 있습니다. 다른 마이크로 프런트엔드 애플리케이션의 버전이 동일한 경우 종속성은 공유됩니다. 마이크로 프런트엔드 애플리케이션은 기본 마이크로 프런트엔드 애플리케이션과 하위 마이크로 프런트엔드 애플리케이션이라는 그룹으로 나뉩니다. 기본 애플리케이션은 다른 하위 애플리케이션을 위한 컨테이너입니다. 한 번에 하...

P粉321676640 2024-01-01 09:43:23 0  1  546

문제 2003(HY000) 해결 방법: MySQL 서버 'db_mysql:3306'에 연결할 수 없습니다(111).

최근에 FastAPIPython 서버를 컨테이너화하려고 했습니다(복제/배가 목적으로도). 이전에는 Docker 컨테이너에 MySQL 서버만 있으면 모든 것이 괜찮았지만 웹 서버도 서비스로 만들었을 때 MySQL 서버에 연결할 수 없어 이제는 애플리케이션이 작동하지 않습니다. 다음은 fromfastapiimportFastAPIimportmysql.connectorapp 애플리케이션에 있는 서버 데이터베이스 초기화 커넥터의 코드 조각입니다.

P粉178132828 2023-09-05 11:18:47 0  1  931

쿼리 제한 후 정렬 실험

이것이 나의 첫 번째 질문입니다. 문제가 있으면 용서해 주십시오. 제약 조건을 기반으로 정렬 쿼리를 만들려고 합니다. 따라서 90개의 레코드가 있는 Customers 테이블이 있습니다. 먼저 3개의 레코드로 제한된 쿼리를 수행한 다음 ContactName이라는 열을 기준으로 이 쿼리의 결과를 정렬하려고 합니다. 내 생각에 이것은 중첩된 쿼리일 수 있습니다. 중첩 쿼리는 SQLServer에서 잘 실행되지만 MySQL에서 구현하는 방법을 모릅니다. 제한 쿼리: Select*fromcustomerslimit

P粉237125700 2023-09-05 14:46:42 0  1  801

CSS 그리드: 하위 콘텐츠가 열 너비를 초과할 때 새 행 생성

CSS 그리드를 기반으로 하는 두 개의 열 레이아웃이 있습니다. 두 번째 열의 내용이 1fr을 초과하면 새 행을 만들고 싶습니다. 현재로서는 내용이 단순히 열을 넘치게 됩니다. 이 레이아웃의 요구 사항 중 하나는 오른쪽 메뉴 열의 항목이 한 행에 있어야 한다는 것입니다. .right-menu{...grid-auto-flow:columndense;...}를 사용하여 이를 달성합니다. Grid-auto-flow 속성을 제거하면 오버플로가 중지됩니다. 그러나 항목이 이제 여러 행으로 쌓여 있어 내가 원하는 것이 아닙니다. .ri 변환도 ...

P粉212114661 2023-09-05 15:18:28 0  1  681

AND, OR 및 NOT 연산자를 사용한 PHP 전체 텍스트 검색 기능

초보자 질문: PHP와 eloquent를 사용하여 검색 문자열에 대한 전체 텍스트 검색을 구현하려고 합니다. $searchstring="+(피해자)+범죄-covid";$searchresult=RssItem::whereRaw("MATCH(description)AGAINST('$searchstring'INBOOLEANMODE)")->ge

P粉076987386 2023-09-05 15:06:32 0  1  657