2016-07-15 17 views
1

Ich verwende Winkel 2 zusammen mit Winkel 2 Material. Bis jetzt benutzte ich css für das Stylen, aber ich möchte diese Checkbox verwenden, wie hier in diesem Codepen gezeigt: https://codepen.io/Sambego/pen/zDLxe Es beinhaltet scss & Ich bin ahnungslos wohin & Wie soll ich diesen scss Code setzen. Hier ist mein subject.component.ts:Ist es möglich, .css & .scss-Dateien für eine eckige 2-Komponente zu verwenden?

@Component({ 
    selector: 'subjects', 
    templateUrl: 'app/subjects.component.html' , 
    styleUrls: ['app/app.component.css'], 
    directives: [ MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ProfileDetailsComponent,AgreementComponent,ROUTER_DIRECTIVES], 
    providers:[MdIconRegistry] 
}) 
+0

Sie müssen die 'transpile'. scss-Dateien mit einem Sass-Transpiler. Wenn Sie ein Webpack verwenden, können Sie z. benutze den "sass-loader". –

Antwort

1

Wenn Sie nicht wollen, SCSS in Ihrem Dateisystem verwenden, und nur das, was von der codepen war nehmen müssen, dann schlage ich diese schöne Website mit http://www.sassmeister.com/ Kopieren und fügen Sie die scss in die linke Seite, dann können Sie kopieren und fügen Sie die CSS von der rechten Seite zu Ihrem Code

Auch bietet Codepen die Option zum Anzeigen der kompilierten CSS-Code, es ist in einem Dropdown auf der rechten Seite der CSS Abschnitt

EDIT:

Nur versucht, Kopieren und Einfügen in die Sassmeister Website ... ging nicht so gut, verwenden Sie den eingebauten CodePen-Vorgang des Compiling zu css dann kopieren und fügen Sie das in Ihren Code

+0

Vielen Dank :) –