Question

使用Angular CLI / webpack构建Angular 2应用程序时，我想为几个Sass变量指定值。就像让一些url(#{$my-base-path}/...)或$fa-font-path指向生产中的CDN，或者只是为接受和生产构建设置不同的背景颜色。

我喜欢Angular CLI从例如environments/environment.prod.ts中选择配置的方式。但我也很乐意为ng build使用额外的命令行参数，但到目前为止还没有运气：

没有Angular CLI，我想我可以use Sass custom functions on the command line，但我不知道如何将这种方法与Angular CLI一起使用。
也许我可以指定一些特定my-variables.sccs的路径用于所有Sass编辑？
Webpack的sass-loader states the following，但我不知道我是否可以使用Angular CLI：
环境变量

如果要在实际输入文件之前添加Sass代码，可以   只需设置data选项即可。在这种情况下，sass-loader不会   覆盖data选项，但只是附加条目的内容。这是   当你的一些Sass变量依赖于。时特别有用   环境：
```
{
    loader: "sass-loader",
    options: {
        data: "$env: " + process.env.NODE_ENV + ";"
    }
}
```

有什么想法吗？

Answer 1

除了Arjan的评论之外，我通过在.scss

中创建包含不同.angular-cli.json文件的多个应用来解决问题

第1步： 为每个环境创建包含.scss文件的多个文件夹，所有.scss文件具有相同的文件名

|- src
  ...
  |- environments
    |- environment-scss
      |- globalVars.scss
    |- environment-prod-scss
      |- globalVars.scss
  ...

在src / environment-scss / globalVars.scss中：

  $my-base-path: 'YOUR/DEV/PATH'

在src / environment-prod-scss / globalVars.scss中：

  $my-base-path: 'YOUR/PROD/PATH'

第2步： 在.angular-cli.json ( Angular-cli Wiki Here )中添加多个应用，并在每个应用对象中为每个环境( Angular-cli Wiki Here )添加stylePreprocessorOptions条目。

"apps": [
  {
    "root": "src",
    ...
    "name": "dev",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-scss"
      ]
    }
    ...
  },
  {
    "root": "src",
    ...
    "name": "prod",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-prod-scss"
      ]
    }
    ...
  }  
],

第3步： 导入需要env特定变量的globalVars.scss。 不要使用相对路径

@import "globalVars";

使用ng build --app=dev时，$my-base-path将为'YOUR/DEV/PATH'，使用ng build --app=prod后，$my-base-path将为'YOUR/PROD/PATH'

Answer 2

从Angular CLI 6开始，生成版本的environment.prod.ts不再被environment.scss自动替换。相反，它uses a new option fileReplacements in angular.json。

对于未来 CLI 6.1，可以很好地扩展为使用与Sass文件完全相同的机制。只需创建一些environment.prod.scss和@import "../../environments/environment"，引用Sass文件中某些angular.json中的第一个，然后调整"defaultProject": "ponyracer", ... "projects": { "ponyracer": { ..., "architect": { "build": { ..., "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }, { // BEWARE: this needs Angular CLI 6.1; see below "replace": "src/environments/environment.scss", "with": "src/environments/environment.prod.scss" } ], ...文件：

build --prod

最后，使用ng build --configuration=production，build ponyracer --configuration=production或> npm install //to get the node module folder > react-native upgrade //to get android and ios folder > react-native link // for linking the libraries > react-native run ios/android进行构建。

简单而一致。

但是 BEWARE ，在Angular CLI 6.1发布之前，上面是won't work：

目前，文件替换功能仅适用于TS文件。更具体地说 - 它仅适用于属于webpack编译器主机的文件。

显然，错误修复will be included in CLI 6.1。

Answer 3

不，它没有。

仅限环境.ts文件。没有SASS。

在这里你可以做的其他事情：

使用TS环境文件获取一些配置值（保存到全局变量或main.ts中的某些内容 - 我认为以前存在将其加载到其他文件中的问题）
有两个空组件encapsulation: ViewEncapsulation.None，因此他们的SASS文件是全局的
*ngIf基于您从环境文件

另一种方法是调用ng eject以使CLI将项目转换为可以修改其配置（RC0及更高版本）的普通webpack项目。

Angular CLI可以将特定于环境的设置传递给Sass变量吗？

3 个答案: