Angular CLI SASS选项

Question

我是Angular的新手,我来自Ember社区.尝试使用基于Ember-CLI的新Angular-CLI.

我需要知道在新的Angular项目中处理SASS的最佳方法.我尝试使用ember-cli-sassrepo来查看它是否会发挥作用,因为Angular-CLI的许多核心组件都是使用Ember-CLI模块运行的.

它没有用,但又不确定我是否只是错误配置了一些东西.

另外,在新的Angular项目中组织样式的最佳方法是什么？将sass文件放在与组件相同的文件夹中会很不错.

Answer 1

使用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"
    }
}

Answer 2

更新Angular 6+

1. 新项目

   当生成一个新的项目与角CLI,指定CSS预处理器

   • 使用SCSS语法

     ng new sassy-project --style=scss
     

   • 使用SASS语法

     ng new sassy-project --style=sass
     

2. 更新现有项目

   通过运行在现有项目上设置默认样式

   • 使用SCSS语法

     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根据选择.

原始答案(Angular <6)

新项目

对于新项目,我们可以设置选项--style=sass或--style=scss根据所需的SASS/SCSS风格

• 使用SASS语法

  ng new project --style=sass 
  

• 使用SCSS语法

  ng new project --style=scss 
  

然后安装node-sass,

npm install node-sass --save-dev

更新现有项目

为了angular-cli编译sass文件node-sass,我不得不运行,

npm install node-sass --save-dev 

哪个安装node-sass.然后

• 对于SASS语法

  ng set defaults.styleExt sass
  

• 用于SCSS语法

  ng set defaults.styleExt scss
  

将默认styleExt设置为sass

(要么)

更改styleExt为sass或scss所需的语法.angular-cli.json,

• 对于SASS语法

  "defaults": {
       "styleExt": "sass",
  }
  

• 用于SCSS语法

  "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"
      ],

要么,

• 对于SASS语法

  "styles": [
          "styles.sass"
        ],
  

• 用于SCSS语法

  "styles": [
          "styles.scss"
        ],
  

Answer 3

引自官方github repo在这里 -

例如,使用一个只安装

npm install node-sass

并将项目中的.css文件重命名为.scss或.sass.它们将自动编译.Angular2App的options参数包含sassCompiler,lessCompiler,stylusCompiler和compassCompiler选项,它们直接传递给各自的CSS预处理器.

看这里

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Answer 4

告诉angular-cli默认使用scss

为避免--style scss每次生成项目时都要通过,可能需要使用以下命令全局调整angular-cli的默认配置:

ng set --global defaults.styleExt scss

请注意,某些版本的angular-cli包含读取上述全局标志的错误(请参阅链接).如果您的版本包含此错误,请使用以下命令生成项目:

ng new some_project_name --style=scss

Answer 5

像Mertcan所说,使用scss的最佳方法是使用该选项创建项目:

ng new My_New_Project --style=scss 

Angular-cli还添加了一个选项,可以在使用以下命令创建项目后更改默认的css预处理器:

ng set defaults.styleExt scss

有关详细信息,您可以在此处查看其文档:

https://github.com/angular/angular-cli

Answer 6

我注意到移动到scss文件时非常烦人的陷阱!一个必须从简单:styleUrls: ['app.component.scss']到styleUrls: ['./app.component.scss'](添加./)进入app.component.ts

生成新项目时会执行哪种操作,但似乎不是在创建默认项目时执行的操作.如果您在ng build期间看到解决错误,请检查此问题.我花了大约1个小时.

Answer 7

对于Angular 9.0及更高版本，更新angular.json"schematics":{}文件中的对象，如下所示：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  },

  // Angular 13 may contain this as well; NOT related
  "@schematics/angular:application": {
    ...
  }
},

Answer 8

ng set --global defaults.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"}'

Answer 9

最好的可能是 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 开始。

Answer 10

Angular-CLI 是推荐的方法，也是 Angular 2+ 社区的标准。

克里特岛与 SCSS 的新项目

ng new My-New-Project --style=sass

转换现有项目（CLI 低于 v6）

ng set defaults.styleExt scss

（必须使用此方法手动重命名所有 .css 文件，不要忘记在组件文件中重命名）

转换现有项目（CLI 高于 v6）

1. 将所有 CSS 文件重命名为 SCSS 并更新引用它们的组件。
2. 将以下内容添加到 angular.json 的“schematics”键中（通常是第 11 行）：

"@schematics/angular:component": { "styleext": "sass" }

Answer 11

截至 2019 年 3 月 10 日，Anguar 放弃了对 sass 的支持。无论您--style在运行时传递什么选项ng new，您总是会.scss生成文件。遗憾的是，对 sass 的支持在没有任何解释的情况下就被放弃了。