css – 在角度2中使用Sass

前端之家收集整理的这篇文章主要介绍了css – 在角度2中使用Sass前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在我的Angular 2项目中设置Sass。基本上我理解有两种方法来创建一个角度2项目

1)使用angular-cli(https://github.com/angular/angular-cli)@H_301_3@

我提到了https://stackoverflow.com/a/41541042/2868352年提到的答案&我可以在angular 2项目中成功使用scss文件,一切都很好但我无法从项目文件夹中的scss文件找到生成的css文件。任何人都可以解释为什么没有生成css文件但仍然有效的原因?@H_301_3@

2)使用快速启动种子(https://angular.io/guide/quickstart)@H_301_3@

我无法获得有关如何在quickstart项目中设置sass的任何信息。有没有人对在angular提供的quickstart项目中使用sass有任何想法?@H_301_3@

提前致谢!@H_301_3@

解决方法

[如果您使用的是角度cli,请检查此答案末尾的已编辑部分]

解释如何在’快速启动种子’中使用sass(https://angular.io/guide/quickstart)
(https://angular.io/guide/setup#download)@H_301_3@

请按照以下简单步骤操作:@H_301_3@

第1步:设置快速入门种子@H_301_3@

使用以下命令进行设置@H_301_3@

npm install
npm start

你会在浏览器上看到’Hello Angular’。@H_301_3@

第2步:安装node-sass和sass-loader@H_301_3@

使用下面提到的命令进行安装@H_301_3@

npm i node-sass -S
npm i sass-loader -S

现在,您可以在’package.json’文件中的’dependencies’中看到这两个添加内容。@H_301_3@

第3步:为Sass代码和Css代码创建2个文件夹@H_301_3@

在“quickstart-master”文件夹中创建两个具有任何名称文件夹。在这种情况下,例如:
“sass_folder”和“css_folder”。现在创建一个演示文件’demo.sass’并将其放在’sass_folder’中。您可以在此.sass文件中放置一个简单的sass代码。它看起来像这样:@H_301_3@

$font-stack:    Helvetica,sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

第4步:在’package.json’文件中进行更改@H_301_3@

添加脚本以构建和监视“sass_folder”中存在的Sass代码。编译后,生成的css代码应存储在“css_folder”中。更改后,’package.json’文件中的“Scripts”应如下所示:@H_301_3@

"scripts": {
     "build": "tsc -p src/","build:watch": "tsc -p src/ -w","build:e2e": "tsc -p e2e/","serve": "lite-server -c=bs-config.json","serve:e2e": "lite-server -c=bs-config.e2e.json","prestart": "npm run build","start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"","pree2e": "npm run build:e2e","e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first","preprotractor": "webdriver-manager update","protractor": "protractor protractor.config.js","pretest": "npm run build","test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"","pretest:once": "npm run build","test:once": "karma start karma.conf.js --single-run","lint": "tslint ./src/**/*.ts -t verbose","build:sass": "node-sass sass_folder/ -o css_folder","watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  }

看看’开始’,’build:sass’和’watch:sass’。@H_301_3@

第5步:运行应用程序@H_301_3@

现在,您可以使用以下命令运行该应用程序:@H_301_3@

npm start

您将在“css_folder”中看到编译后的css代码文件名为“demo.css”。它看起来像这样(在这种情况下):@H_301_3@

body {
  font: 100% Helvetica,sans-serif;
  color: #000; }

现在,如果您在.sass文件中进行任何更改,它将在脚本正在观察代码时动态地反映到.css文件。@H_301_3@

如果显示错误,请在.sass文件中进行任何更改时关闭.css文件。@H_301_3@

注意:对于scss代码,您可以按照相同的步骤操作。在这种情况下,您只需将.scss文件放在“sass_folder”中。@H_301_3@

[编辑]
如果您想使用Angular CLI:@H_301_3@

在创建新的Angular项目时,使用下面提到的cmnds:@H_301_3@

对于sass:@H_301_3@

ng new Demo_Project --style=sass

对于scss:@H_301_3@

ng new Demo_Project --style=scss

要更改现有样式:@H_301_3@

ng set defaults.styleExt scss

在此之后,您可以正常使用Cli。@H_301_3@

猜你在找的CSS相关文章