我是Angular的新手,我来自Ember社区。尝试使用基于Ember-CLI的新Angular-CLI。
我需要知道在新的Angular项目中处理SASS的最佳方法。我尝试使用ember-cli-sass
repo来查看它是否会发挥作用,因为Angular-CLI的许多核心组件都是使用Ember-CLI模块运行的。
它没有用,但又不确定我是否只是错误配置了一些东西。
另外,在新的Angular项目中组织样式的最佳方法是什么?将sass文件放在与组件相同的文件夹中会很不错。
使用angular cli创建项目时,请尝试以下操作:
ng new My_New_Project --style=sass
这将使用预定义的sass文件生成所有组件。
如果你想要scss语法创建你的项目:
ng new My_New_Project --style=scss
如果要更改项目中的现有样式
ng set defaults.styleExt scss
Cli处理其余部分。
最新版本
对于Angular 6,使用CLI在现有项目上设置新样式:
ng config schematics.@schematics/angular:component.styleext scss
或者直接进入angular.json:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
以下应在角度CLI 6项目中工作。即如果你得到:
get / set已被弃用,转而使用config命令。
npm install node-sass --save-dev
然后(确保更改项目名称)
ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass
要获取默认项目名称,请使用:
ng config defaultProject
但是:如果您已将项目从<6升级到角度6,那么配置很可能不会出现。在这种情况下,您可能会得到:
无效的JSON字符:“s”为0:0
因此,需要手动编辑angular.json
。
你会希望它看起来像这样(注意styleex属性):
...
"projects": {
"Sassy": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
...
对我来说似乎是一个过于复杂的架构。 _(ツ)_ /¯
您现在必须将所有css / less文件更改为scss并更新组件中的任何引用等,但您应该好好去。
截至2009年3月10日,Anguar放弃了sass的支持。无论你在运行--style
时传递给ng new
的选项是什么,你总是得到生成的.scss
文件。令人遗憾的是,没有任何解释就删除了sass支持。
将其设置为全局默认值
ng set defaults.styleExt=scss --global
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
添加到@ Component.styles数组的样式字符串必须用CSS编写,因为CLI无法将预处理器应用于内联样式。
基于角度文档https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
我尝试使用此命令更新我的项目以使用sass
设置defaults.styleExt scss
但得到了这个
get / set已被弃用,转而使用config命令。
所以我删除了我的项目(因为我刚刚开始并且在我的项目中没有代码)并创建了一个新的sass初始设置
新的my-sassy-app --style = scss
但是如果有人可以分享更新现有项目的方法,我将不胜感激。
步骤1。使用npm安装bulma包
npm install --save bulma
第2步。打开angular.json并更新以下代码
...
"styles": [
"node_modules/bulma/css/bulma.css",
"src/styles.scss"
],
...
而已。
要轻松公开Bulma的工具,请将stylePreprocessorOptions添加到angular.json。
...
"styles": [
"src/styles.scss",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules",
"node_modules/bulma/sass/utilities"
]
},
...
ng new sassy-project --style=scss
使用SASS语法
ng new sassy-project --style=sass
ng config schematics.@schematics/angular:component.styleext scss
使用SASS语法
ng config schematics.@schematics/angular:component.styleext sass
上面的命令将使用更新您的工作区文件(angular.json)
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
根据选择,styleext
可以是scss
或sass
。对于新项目,我们可以根据所需的味道设置选项--style=sass
或--style=scss
SASS / SCSS
ng new project --style=sass
ng new project --style=scss
然后安装node-sass
,
npm install node-sass --save-dev
要使angular-cli
用node-sass
编译sass文件,我必须运行,
npm install node-sass --save-dev
安装node-sass
。然后
ng set defaults.styleExt sass
ng set defaults.styleExt scss
将默认styleExt设置为sass
(要么)
将styleExt
更改为sass
或scss
,以获得.angular-cli.json
中所需的语法,
"defaults": {
"styleExt": "sass",
}
"defaults": {
"styleExt": "scss",
}
ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
@ multi styles
这是通过改变.angular-cli.json
的线来修复的,
"styles": [
"styles.css"
],
要么,
"styles": [
"styles.sass"
],
"styles": [
"styles.scss"
],
引自官方github repo在这里 -
例如,使用一个只安装
npm install node-sass
并将项目中的.css文件重命名为.scss或.sass。它们将自动编译。 Angular2App的options参数包含sassCompiler,lessCompiler,stylusCompiler和compassCompiler选项,它们直接传递给各自的CSS预处理器。
看这里
为避免每次生成项目时都传递--style scss
,您可能需要使用以下命令全局调整angular-cli的默认配置:
ng set --global defaults.styleExt scss
请注意,某些版本的angular-cli包含读取上述全局标志(see link)的错误。如果您的版本包含此错误,请使用以下命令生成项目:
ng new some_project_name --style=scss
像Mertcan所说,使用scss的最佳方法是使用该选项创建项目:
ng new My_New_Project --style=scss
Angular-cli还添加了一个选项,可以在使用以下命令创建项目后更改默认的css预处理器:
ng set defaults.styleExt scss
有关详细信息,您可以在此处查看其文档:
我注意到移动到scss文件时非常烦人的陷阱!一个必须从一个简单的:styleUrls: ['app.component.scss']
移动到styleUrls: ['./app.component.scss']
(添加./
)在app.component.ts
生成新项目时会执行哪种操作,但似乎不是在创建默认项目时执行的操作。如果您在ng build期间看到解决错误,请检查此问题。我花了大约1个小时。
最好的可能是ng new 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:”并将此对象添加到rules数组的末尾(不要忘记在前一个对象的末尾添加逗号):
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
然后在你的组件中:
@Component({
styleUrls: ['./filename.scss'],
})
如果您需要全局CSS支持,那么在顶级组件(可能是app.component.ts)上删除封装并包含SCSS:
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'app',
styleUrls: ['./bootstrap.scss'],
encapsulation: ViewEncapsulation.None,
template: ``
})
class App {}
来自Angular starter here。
自ng6以来,ng set --global defaults.styleExt=scss
已被弃用。你会收到这条消息:
get / set已被弃用,转而使用config命令
你应该使用:
ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
如果要定位特定项目(将{project}替换为项目名称):
ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'
Angular-CLI是推荐的方法,是Angular 2+社区的标准。
使用SCSS创建一个新项目
ng new My-New-Project --style=sass
转换现有项目(CLI小于v6)
ng set defaults.styleExt scss
(必须使用此方法手动重命名所有.css文件,不要忘记在组件文件中重命名)
转换现有项目(CLI大于v6)
"@schematics/angular:component": {
"styleext": "sass"
}