从CSS到CSS的Angular CLI

css CSS

番长千羽

2020-03-17

我已经阅读了文档,其中说如果要使用scss,必须运行以下命令:

ng set defaults.styleExt scss

但是当我这样做并制作该文件时,我仍然在控制台中收到此错误:

styles.bundle.js:33Uncaught错误:模块构建失败:错误:ENOENT:没有此类文件或目录,请打开'/Users/Egen/Code/angular/src/styles.css'(…)

第1969篇《从CSS到CSS的Angular CLI》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
神无ProHarry 2020.03.17

对于现有项目

angular.json文件中

  1. build部分和test部分取代:

    "styles": ["src/styles.css"], 通过 "styles": ["src/styles.scss"],

  2. 更换:

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

使用ng config schematics.@schematics/angular:component.styleext scss命令有效,但是不能将配置放在同一位置。

在您的项目中,.css文件重命名.scss

对于新项目,此命令可以完成所有工作:

ng n project-name --style=scss

对于全局配置

新版本似乎没有全局命令

Jim猪猪伽罗 2020.03.17

Angular CLI的CSS预处理器集成:6.0.3

生成新项目时,您还可以定义所需的样式文件扩展名:

ng new sassy-project --style=sass

或在现有项目上设置默认样式:

ng config schematics.@schematics/angular:component.styleext scss

所有主要CSS预处理器的Angular CLI文档

凯Near 2020.03.17

使用命令:

ng config schematics.@schematics/angular:component.styleext scss
猴子樱 2020.03.17

对于遇到此线程Nrwl扩展的用户:Nx会拦截所有命令(例如ng generate component myCompent),然后将其传递给AngularCLI。

使SCSS在Nx工作空间中工作的命令:

ng config schematics.@nrwl/schematics:component.styleext scss

飞云西门Tony 2020.03.17

对于Angular 6,请查看官方文档

注:对于@angular/cli比旧版本6.0.0-beta.6使用ng set到位ng config

对于现有项目

在现有的使用默认css样式设置的angular-cli项目中,您需要做一些事情:

  1. 将默认样式扩展名更改为 scss

手动更改.angular-cli.json(Angular 5.x和更早版本)或angular.json(Angular 6+)或运行:

ng config defaults.styleExt=scss

如果出现错误:请Value cannot be found.使用以下命令:

ng配置示意图。@ schematics / angular:component.styleext scss

(*来源:Angular CLI SASS选项

  1. 将现有.css文件重命名.scss(即styles.css和app / app.component.css)

  2. 指向CLI来找到styles.scss

手动更改apps[0].stylesangular.json中的文件扩展名

  1. 指向组件以查找新样式文件

更改styleUrls组件中的以匹配新文件名

对于未来的项目

如@Serginho所述,您可以在运行ng new命令时设置样式扩展名

ng new your-project-name --style=scss

如果要为以后创建的所有项目设置默认值,请运行以下命令:

ng config --global defaults.styleExt=scss
小卤蛋Near小卤蛋 2020.03.17

对于Angular 6,

ng config schematics.@schematics/angular:component.styleext scss

注意:@ schematics / angular是Angular CLI的默认原理图

Pro小哥GO 2020.03.17

打开angular.json文件

1.改变

"schematics": {}

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. 从(在两个地方)更改

"src/styles.css"

"src/styles.scss"

然后检查并重命名所有.css文件并从以下位置更新component.ts文件的styleUrls.css to .scss

乐神奇 2020.03.17

从ng6开始,这可以通过angular.json在根级别添加以下代码来完成

手动更改.angular.json

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android