错误：预期"styleUrls"为字符串数组

Question

使用动态样式url时出现此错误

var dynamic = environment.booleanCondition ? '-new' : '';
@Component({
selector: 'app-some-thing',
templateUrl: './some-thing.component.html',
styleUrls: [require(`./some-thing${dynamic}.component.scss`).default]
})

我在使用ng serve时遇到了这个问题

错误:Expected "styleUrls"是String

的数组

重新编译后，错误消失，应用程序正常工作，但在终端上抛出不同的错误。

错误TS2591:无法找到名称'require'。需要为节点安装类型定义吗?尝试npm i @types/node，然后将node添加到tsconfig中的types字段。

但即使安装了@types/node并添加了node，它仍然不能解决我之前的问题&;styleUrls"是一个字符串数组。我以前见过这个问题发布过很多次，但没有一个修复似乎对我有效。

Answer 1

更新答案:

OP更新了environment.ts文件中的变量决定使用哪个scss文件的问题。在这种情况下，有几种方法可以选择要使用的文件:

选项1:

通过包将目标文件复制到主文件。json命令(独立于environment.ts)

使主scss文件为空，以便可以将所需的css复制到其中。在包中。创建如下脚本:

copy-old-scss: 'cp .src/{path-to-your-old-scss-file}/old-file.scss ./src/{path-to-main-scss-file}/something.component.scss'
copy-new-scss: 'cp .src/{path-to-your-new-scss-file}/old-file.scss ./src/{path-to-main-scss-file}/something.component.scss'

在每个env运行构建命令管道之前执行这些脚本:

'dev':
- step:
script:
- npm install --quiet
- npm copy-old-scss
- npm run build
'prod':
- step:
script:
- npm install --quiet
- npm copy-new-scss
- npm run build

选项2:

使用angular.json的filereplacement功能

angular.json:

"production": {
"optimization": true,
...
...
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/.../something.component.scss",
"with": "src/.../something-new.component.scss"
}
],

原始回答:

与其做这些非标准的Angular的事情，为什么不采用一种更传统的方法，在一个文件中控制所有的css。如果我有选择的话，我会这样做。

1. 修改标志为布尔值，let useNewCss = booleanCondition;
2. 将两个css文件合并为一个，但在文件中保留旧css和新css的特定部分:

something.component.scss:

.old-css {
// all css from my old file goes here
}
.new-css {
// all css from my new file goes here 
}

3. 使用ngClass将整个html代码包装在所需的css类

something.component.html:

<div [ngClass]="{'old-css': !useNewCss, 'new-css': useNewCss }">
<!-- All html code goes here -->
...
...
...
</div>