我正在尝试在我的 Angular 2
元素中设置 Sass
。据我了解,基本上有两种方法可以创建 Angular 2 元素
1) 使用 angular-cli
( https://github.com/angular/angular-cli )
我引用了 https://stackoverflow.com/a/41541042/2868352 中提到的答案&我可以在 Angular 2 元素中成功使用 scss
文件,一切正常但我无法从 scss
文件中找到生成的 css
文件元素文件夹。谁能解释为什么没有生成 css
文件但仍然有效的原因?
2) 使用quickstart seed
( https://angular.io/guide/quickstart )
我无法获得有关如何在快速启动元素中设置 sass
的任何信息。有没有人知道在angular提供的quickstart元素中使用sass
?
提前致谢!
最佳答案
[如果您使用的是 angular cli,请检查此答案末尾的编辑部分]
解释如何在“快速启动种子”中使用 sass( https://angular.io/guide/quickstart ) ( https://angular.io/guide/setup#download )
请按照以下简单步骤操作:
第 1 步:设置快速启动种子
使用下面的命令进行设置
npm install
npm start
您将在浏览器上看到“Hello Angular”。
第 2 步:安装 node-sass 和 sass-loader
使用下面提到的命令安装
npm i node-sass -S
npm i sass-loader -S
现在您可以看到这两个都已添加到“package.json”文件中的“依赖项”中。
第 3 步:为 Sass 代码和 Css 代码创建 2 个文件夹
在“quickstart-master”文件夹中创建两个任意名称的文件夹。在这种情况下,例如: “sass_folder”和“css_folder”。现在创建一个演示文件“demo.sass”并将其放在“sass_folder”中。您可以在此 .sass 文件中放置一个简单的 sass 代码。它看起来像这样:
$font-stack: Helvetica, sans-serif
$primary-color: #000
body
font: 100% $font-stack
color: $primary-color
第 4 步:更改“package.json”文件
添加脚本以构建和观察“sass_folder”中存在的 Sass 代码。编译后,生成的 css 代码应存储在“css_folder”中。更改“package.json”文件中的“脚本”后应如下所示:
"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/"
}
仅查看“start”、“build:sass”和“watch:sass”。
第 5 步:运行应用程序
现在您可以使用以下命令运行应用程序:
npm start
您将在“css_folder”中看到编译后的 css 代码,文件名为“demo.css”。它看起来像这样(在这种情况下):
body {
font: 100% Helvetica, sans-serif;
color: #000; }
现在,如果您在 .sass 文件中进行任何更改,它将在脚本监视代码时动态地反射(reflect)到 .css 文件中。
如果显示错误,请在对 .sass 文件进行任何更改时关闭 .css 文件。
注意:对于 scss 代码,您可以按照相同的步骤操作。在这种情况下,您只需将 .scss 文件放在“sass_folder”中即可。
[已编辑] 如果您想使用 Angular CLI:
在创建新的 Angular 元素时使用下面提到的命令:
对于 sass:
ng new Demo_Project --style=sass
对于 scss:
ng new Demo_Project --style=scss
要更改现有样式:
ng set defaults.styleExt scss
之后就可以正常使用Cli了。
关于css - 在 Angular 2 中使用 Sass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42433995/