我是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文件与组件放在同一个文件夹中就太好了。
当前回答
针对Angular 6+的更新
新项目
当用Angular CLI生成一个新项目时,将css预处理器指定为
使用SCSS语法 Ng新的ssy-project——style=scss 使用SASS语法 Ng新的时髦项目——style=sass
更新现有项目
通过运行在现有项目上设置默认样式
使用SCSS语法 Ng config schematics.@schematics/angular:组件。styleext scss 使用SASS语法 Ng config schematics.@schematics/angular:组件。styleext sass 上面的命令将更新你的工作空间文件(angular.json) “图表”:{ “@schematics /角:组件":{ :“styleext scss” } }
其中styleext可以是SCSS或sass根据选择。
其他回答
Angular CLI版本9(用于创建Angular 9项目)现在从schematics中获取style,而不是styleext。使用如下命令: Ng config schematics.@schematics/angular:组件。样式scsand和生成的角。Json应该是这样的 “图表”:{ “@schematics /角:组件":{ “风格”:“scss” } }
其他可能的解决方案和解释: 用angular CLI创建一个支持sass的新项目,试试这个:
ng new My_New_Project --style=scss
你也可以使用——style=sass &如果你不知道区别,阅读这篇简短的文章,如果你仍然不知道,就使用scss并继续学习。
如果你有一个angular 5的项目,使用这个命令来更新项目的配置。
ng set defaults.styleExt scss
最新版本
Angular 6使用CLI为现有项目设置新样式:
ng config schematics.@schematics/angular:component.styleext scss
或者直接导入angular.json:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
Ng set——全局默认值。styleExt=scss自ng6起已弃用。你会收到这样的信息:
Get /set已弃用,改用config命令
你应该使用:
ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
如果你想要针对一个特定的项目(用你的项目名替换{project}):
ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'
最好是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。
针对Angular 6+的更新
新项目
当用Angular CLI生成一个新项目时,将css预处理器指定为
使用SCSS语法 Ng新的ssy-project——style=scss 使用SASS语法 Ng新的时髦项目——style=sass
更新现有项目
通过运行在现有项目上设置默认样式
使用SCSS语法 Ng config schematics.@schematics/angular:组件。styleext scss 使用SASS语法 Ng config schematics.@schematics/angular:组件。styleext sass 上面的命令将更新你的工作空间文件(angular.json) “图表”:{ “@schematics /角:组件":{ :“styleext scss” } }
其中styleext可以是SCSS或sass根据选择。
Angular- cli是推荐的方法,也是Angular 2+社区的标准。
克里特岛与SCSS的新项目
ng new My-New-Project——style=sass
转换现有项目(CLI小于v6)
Ng设置默认值。styleExt scss
(必须手动重命名所有的。css文件,不要忘记重命名你的组件文件)
转换现有项目(CLI大于v6)
将所有CSS文件重命名为SCSS,并更新引用它们的组件。 将以下内容添加到angular的“schematics”键中。Json(通常是第11行):
“@schematics /角:组件":{ “styleext”:“萨斯” }