2017-12-01 2 views
0

내 재료에 각도 재료 테마를 포함하려면 어떻게해야합니까?ionic에 각도 재료 테마 추가 3

variable.scss에서 @import '[email protected]/material/prebuilt-themes/indigo-pink.css'를 시도하고 내 응용 프로그램 모듈의 styleUrls에도 경로를 사용해 보았습니다. '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css'도 사용해 보았습니다. 모든 경우 브라우저에서

이 오류는 다른 node_modules 경로를 포함하지 않는 이온 앱 스크립트의 구성 존재로 인해 404

+0

가져 오기 당신의 app.scss에 자료 파일. 경로가 올바른지 확인하십시오. 경로가 올바른지 확인하십시오. 그렇지 않으면 당신의 index.html (dirty imo)에 포함하기 – JoeriShoeby

+0

app.scss에서 가져 오기를 시도했지만 나에게도 여전히 404를 제공하고 있습니다. 그러나 sss.config 업데이트를 사용하여 scss 및 미리 가져온 테마의 확장자를 변경하면 나를 위해 일했다. 혼자 css 파일에 문제가있는 것 같습니다. – jose

답변

1

을주고있다. 이

sass.config.json config 폴더에있는 파일을 만들 해결하려면 아래의 내용

// cross verify with node_modules/@ionic/app-scripts/config/sass.config.js 

module.exports = { 

    /** 
    * includePaths: Used by node-sass for additional 
    * paths to search for sass imports by just name. 
    */ 
    includePaths: [ 
    'node_modules/ionic-angular/themes', 
    'node_modules/ionicons/dist/scss', 
    'node_modules/ionic-angular/fonts', 

    'PATH/TO/YOUR/FILE' 
    ] 

}; 

업데이트 파일

package.json

및 추가 아래

"config": { 
    "ionic_sass": "./config/sass.config.js" 
}, 

이 제공 무엇에 대한 기본 앱 스크립트 설정을 무시합니다.

0

공지 사항 당신이 당신은 확장없이 @import파일 이름 만를 제공 할 필요가 CSS 파일 (안 SCSS)를 가져올 것을 한 번이 경우에. .css 확장자를 제공하는 경우 @importSASS documentation에 명시된대로 CSS @import 규칙으로 컴파일됩니다.

그래서 당신의 node_modules/@angular/material/prebuilt-themes을 포함 할 경우 includePaths이처럼 app.scss 될 것입니다 뭔가 :

// http://ionicframework.com/docs/theming/ 


// App Global Sass 
// -------------------------------------------------- 
// Put style rules here that you want to apply globally. These 
// styles are for the entire app and not just one component. 
// Additionally, this file can be also used as an entry point 
// to import other Sass files to be included in the output CSS. 
// 
// Shared Sass variables, which can be used to adjust Ionic's 
// default Sass variables, belong in "theme/variables.scss". 
// 
// To declare rules for a specific mode, create a child rule 
// for the .md, .ios, or .wp mode classes. The mode class is 
// automatically applied to the <body> element in the app. 

@import "indigo-pink"