是否可以将 .css 和 .scss 文件同时用于 angular 2 组件？答案

【问题标题】：Is it possible to use .css & .scss files both for an angular 2 component?是否可以将 .css 和 .scss 文件同时用于 angular 2 组件？
【发布时间】：2016-11-18 17:51:40
【问题描述】：

我正在使用 angular 2 和 angular 2 材料。到目前为止，我一直在使用 css 进行样式设置，但我希望使用此复选框，如此代码笔中所示，例如：https://codepen.io/Sambego/pen/zDLxe 它涉及 scss，我不知道应该在哪里以及如何放置这个 scss 代码。这是我的 subject.component.ts：

@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]
})

【问题讨论】：

您需要使用 Sass 转译器转译 .scss 文件。如果你使用 webpack，你可以例如使用“sass-loader”。

标签： css angular sass angular2-material

【解决方案1】：

如果你不想在你的文件系统中使用scss，只需要从codepen中获取，那么我建议使用这个不错的网站http://www.sassmeister.com/将scss复制并粘贴到左侧然后你可以复制并将右侧的 css 粘贴到您的代码中

另外，codepen 提供了查看已编译 css 代码的选项，它位于 css 部分右侧的下拉菜单中

编辑：

刚刚尝试复制并粘贴到sassmeister网站...没有那么好，使用编译到css的内置codepen操作然后将其复制并粘贴到您的代码中

【讨论】：