我是Angular的新手,来自Ember社区。尝试使用新的基于Ember-CLI的Angular-CLI。
我需要知道在一个新的Angular项目中处理SASS的最佳方法。我尝试使用Ember-CLI -sass回购,看看它是否能正常运行,因为Angular-CLI的许多核心组件都是在Ember-CLI模块上运行的。
它没有工作,但比再次不确定,如果我只是配置错误的东西。
另外,在新的Angular项目中组织样式的最佳方法是什么?如果能将sass文件与组件放在同一个文件夹中就太好了。
我是Angular的新手,来自Ember社区。尝试使用新的基于Ember-CLI的Angular-CLI。
我需要知道在一个新的Angular项目中处理SASS的最佳方法。我尝试使用Ember-CLI -sass回购,看看它是否能正常运行,因为Angular-CLI的许多核心组件都是在Ember-CLI模块上运行的。
它没有工作,但比再次不确定,如果我只是配置错误的东西。
另外,在新的Angular项目中组织样式的最佳方法是什么?如果能将sass文件与组件放在同一个文件夹中就太好了。
当前回答
CSS预处理器集成 Angular CLI支持所有主要的CSS预处理程序:
要使用这些预处理器,只需将文件添加到组件的styleUrls中:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app works!';
}
当生成一个新项目时,你也可以定义样式文件的扩展名:
ng new sassy-project --style=sass
或者在现有项目上设置默认样式:
ng config schematics.@schematics/angular:component.styleext scss
注意:@schematics/angular是angular CLI的默认原理图
样式字符串添加到@Component。styles数组必须用CSS编写,因为CLI不能对内联样式应用预处理程序。
基于angular文档 https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
其他回答
设置为全局默认值
Ng设置默认值。styleExt = scss——全球
引用自官方github回购这里-
以安装为例 NPM安装node-sass 将项目中的.css文件重命名为.scss或.sass。它们将被自动编译。 Angular2App的options参数有sassCompiler、lessCompiler、stylusCompiler和compassCompiler选项,它们直接传递给各自的CSS预处理器。
在这里看到的
https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
截至2019年3月10日,安圭尔放弃了对萨斯的支持。不管你在运行ng new时传递给——style什么选项,你总是会生成.scss文件。很遗憾,没有任何解释就取消了粗鲁的支持。
不要使用SASS或ANGULAR的嵌入式CSS系统!!
这一点我怎么强调都不为过。当你同时使用这两种技术时,Angular的人不理解基本的级联样式表系统——就像这个Angular。json设置-编译器将所有CSS放入Javascript模块,然后将它们作为嵌入式CSS输出到HTML页面的头部,破坏和混淆级联顺序,并禁用原生CSS导入级联。
出于这个原因,我建议你从“ANGULAR.”中删除所有的样式引用。,然后手动将它们添加回“index.html”中,就像这样:
<link href="styles/styles.css" rel="stylesheet" />
现在你有了一个功能齐全的级联CSS系统,它可以在多次刷新时完全缓存在你的浏览器中,无需ecmascript的杂技,节省大量带宽,增加静态文件中的CSS整体管理,并完全控制级联顺序,而不必像Angular尝试的那样将笨拙的嵌入CSS注入到所有web页面头部。
当您了解如何在基本CSS文件中管理级联时,甚至不需要使用SASS。对于那些使用少量链接的CSS文件学习级联顺序的人来说,具有复杂CSS的大型网站可以非常简单地管理。
最好是ng新的myApp——style=scss
然后Angular CLI会用scss为你创建任何新组件……
注意,使用scss在浏览器中不起作用,你可能知道。所以我们需要一些东西来编译它到css,因此我们可以使用node-sass,像下面这样安装它:
npm install node-sass --save-dev
你应该可以出发了!
如果你使用webpack,请在这里阅读:
命令行内的项目文件夹,其中您现有的package.json 是:NPM install node-sass sass-loader raw-loader——save-dev 在webpack.common.js中,搜索“rules:”并将该对象添加到 规则数组的结尾(不要忘记在数组的末尾添加逗号 以前的对象):
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
然后在你的组件中:
@Component({
styleUrls: ['./filename.scss'],
})
如果你想要全局CSS支持,那么在顶级组件(可能 去掉封装并包含SCSS:
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'app',
styleUrls: ['./bootstrap.scss'],
encapsulation: ViewEncapsulation.None,
template: ``
})
class App {}
这里是Angular starter。