vue에서 sass 변수를 재정의하려면 어떻게 해야 합니까?
예를 들어 _variables.scss의 변수를 변경하고 싶습니다.
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
/*...*/
My Vue 2에서는main.js
저는 이런 구체화된 스타일을 포함해요.
require('materialize-css/sass/materialize.scss');
!default로 인해, 제 생각에는,_variables.scss
구체화되기 전에 말이야 하지만 어떻게 해야 할지 모르겠어요
그럼 나만의 변수를 설정하는 적절한 방법은 무엇일까요?$primary-color: color("blue", "lighten-2")
(_colors.scss에서 미리 정의된 팔레트를 사용하고 싶습니다.)
편집 1: vue2를 vue-cli와 함께 설치했습니다.
편집 2:
폴더 구조:
├── build/
├── config/
├── dist/
├── node_modules/
│ ├── materialize-css
├── src/
│ ├── components
│ ├── router
│ └── main.js
├── package.json
└── index.html
구체화된 css에서 기본 설정을 변경하기 전에 먼저 설정을 변경할 컴포넌트를 Import해야 합니다.그런 다음 기본 설정을 재정의한 다음 구체화를 가져와야 합니다.예를 들어, 기본 색상을 변경하려면 파일을 생성하십시오.app.scss
그런 다음 다음 코드를 적습니다.
//please put the paths as per yours project directory structure
@import "materialize-css/sass/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize-css/sass/materialize'
주의: app.css가 페이지에 포함되어 있어야 합니다.예시와 같이 app.css는 index.html과 같은 수준의 프로젝트 루트 폴더에 있어야 합니다.
이제 로드할 수 있습니다.app.scss
또는app.css
Vue 2에서 로서require('../app.scss');
전체 소스를 보려면 공식 구체화된 Github repo를 방문하십시오.
다만, 1.0.0을 채용할 때는, 다음의 길드 라인을 따라서 색을 덧쓰기해 주세요.
- 덮어쓸 변수 값을 정의합니다(예:$primary-color)
- materialize.scss 라이브러리를 Import합니다.
오버라이드 값은 materialize.scss를 Import하기 전에 정의해야 합니다.즉, color() 등의 materialize 함수를 사용할 수 없습니다.
예:
// main.scss - the order of the imports is important !!!
@import './_colors';
@import 'materialize-css/sass/materialize.scss';
// _colors.scss
$primary-color: #03a9f4; //light-blue
언급URL : https://stackoverflow.com/questions/42458439/how-to-override-materializecss-sass-variables-in-vue
'it-source' 카테고리의 다른 글
(테스트뿐만 아니라) 예외인 것처럼 numpy 경고를 수신하려면 어떻게 해야 합니까? (0) | 2022.12.29 |
---|---|
'mysqldump'를 사용하여 CSV 형식의 모든 테이블 덤프 (0) | 2022.12.19 |
엔티티 프레임워크 MariaDb 문자열 날짜 문제 (0) | 2022.12.19 |
동일한 서버에서 MySQL 데이터베이스를 복제하는 방법 (0) | 2022.12.19 |
부모 POM에서 상속받은 아티팩트를 제외할 수 있는 방법이 있습니까? (0) | 2022.12.19 |