Angular CLI能否将特定于环境的设置传递给Sass变量？

在使用Angular CLI/webpack构建Angular 2应用程序时，我想为几个Sass变量指定值。例如，使一些

url（#{$mybase path}/…）

或

$fa font path

指向生产中的CDN，或者简单地为验收和生产构建设置不同的背景颜色

我喜欢Angular CLI从中选择配置的方式，例如，

environments/environment.prod.ts

。但我也很乐意为

ng build

使用额外的命令行参数，但到目前为止运气不佳：

• 如果没有Angular CLI，我想我可以，但我不知道如何将该方法与Angular CLI一起使用

• 也许我可以指定一些特定的

  my variables.sccs

  的路径以用于所有Sass编译

• Webpack的sass加载程序，但我不知道是否可以将其用于Angular CLI：
  环境变量
  如果要在实际条目文件之前预编Sass代码，可以 只需设置

  数据

  选项。在这种情况下，sass加载程序将不会 覆盖

  数据

  选项，但只附加条目的内容。这是 当某些Sass变量依赖于 环境：

  {
      loader: "sass-loader",
      options: {
          data: "$env: " + process.env.NODE_ENV + ";"
      }
  }
  

有什么想法吗？

不，没有

只有environment.ts文件。不要胡说八道

以下是您可以做的其他事情：

• 使用TS环境文件获取一些配置值（保存到全局变量或

  main.TS

  中的某些内容-我认为在其他文件中加载它时会出现问题）
• 有两个封装为

  的空组件：ViewEncapsulation.None

  ，因此它们的SASS文件是全局的

• *ngIf

  这两个组件中的每一个都基于您从环境文件中存储的值

---

另一种方法是调用

ng eject

，让CLI将项目转换为一个普通的网页包项目，您可以修改其配置（RC0及以上）。

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

.angular CLI.json

中创建多个具有不同

.scss

文件的应用程序解决了这个问题

第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'

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

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

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

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

第二步： 在

.angular cli.json

中添加多个应用程序，并在每个环境的每个应用程序对象中添加

stylepreprocessions

条目

第三步： 在需要环境特定变量的位置导入

globalVars.scss

不要使用相对路径

@import "globalVars";

---

当使用

ng build--app=dev

时，

$my base path

将是

'YOUR/dev/path'

，当使用

ng build--app=prod

时，

$my base path

将是

'YOUR/prod/path'

，从第6页开始，生产版本的

environment.ts

不再自动替换为

environment.prod.ts

。相反，它是

对于未来的CLI 6.1，可以很好地对其进行扩展，以便对Sass文件使用相同的机制。只需创建一些

environment.scss

和

environment.prod.scss

，在Sass文件中引用一些

@import./../environments/environment“

中的第一个，并调整

angular.json

文件：

“defaultProject”：“ponyracer”，
...
“项目”：{
“波尼拉克”：{
...,
“建筑师”：{
“构建”：{
...,
“配置”：{
“生产”：{
“文件替换”：[
{
“替换”：“src/environments/environment.ts”，
“with”：“src/environments/environment.prod.ts”
},
{
//注意：这需要使用Angular CLI 6.1；请参见下文
“替换”：“src/environments/environment.scss”，
“with”：“src/environments/environment.prod.scss”
}
],
...

最后，使用

build--prod

，

ng build--configuration=production

或

build-ponyracer--configuration=production

进行构建

简单且一致

但是，在Angular CLI 6.1发布之前，请注意上述内容：

目前，文件替换功能仅适用于TS文件。更具体地说，它仅适用于作为Web包编译器主机一部分的文件

---

显然，bug修复了。

…但是：这意味着空组件需要包括所有Sass源（或者至少包括所有使用变量的源），如果许多真实组件都有自己的使用变量的Sass文件，这可能会很麻烦。仅供将来参考：我创建了3个虚拟组件，其中

样式URL

指向，例如，

environment.prod.scss

。这些组件设置了一些Sass变量，然后

@import

我真实组件用于在其中列出的Sasss

样式URL

（现在为空）由于那些真正的组件使用了

：host deep

和scoped CSS，我无法将样式设置为全局样式。相反，我重复嵌套：

非常难看，但现在可以使用了。很好，我们测试了，效果很好，并允许我们删除前面答案中引入的虚拟组件。从6.2.2开始，这对我不起作用，我很抱歉最晚阅读7.3版本的其他版本，但这仍然不起作用。这是一个很好的解决方法：