vue에서 sass 변수를 재정의하려면 어떻게 해야 합니까?

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.cssVue 2에서 로서require('../app.scss');

전체 소스를 보려면 공식 구체화된 Github repo를 방문하십시오.

다만, 1.0.0을 채용할 때는, 다음의 길드 라인을 따라서 색을 덧쓰기해 주세요.

1. 덮어쓸 변수 값을 정의합니다(예:$primary-color)
2. 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