如何用 Angular CLI 替换 SCSS 文件? [英] How to replace SCSS files with Angular CLI?
问题描述
Angular CLI 提供了在构建时替换文件的可能性该项目.我想使用此功能将具有默认样式的 SCSS 文件替换为包含客户特定 CSS 的 SCSS 文件.
Angular CLI provides the possibility to replace files when building the project. I would like to use this functionality to replace a SCSS file with default styling, with a SCSS file that contains customer specific CSS.
但 Angular CLI 似乎不会替换 SCSS 文件.我怎么能做到这一点?
But Angular CLI seems not to replace the SCSS files. How could I achieve this?
我尝试过的:
environment.default.ts
export const environment = {
name: 'default'
};
environment.special.ts
export const environment = {
name: 'special'
};
default/_scss-config.scss
@debug ('default'); // gets called but should never be called
special/_scss-config.scss
@debug ('special'); // never gets called
angular.json(仅相关部分)
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"fileReplacements": [
{
"replace": "src/environments/environment.default.ts",
"with": "src/environments/environment.special.ts"
},
{
"replace": "src/scss/default/_scss-config.scss",
"with": "src/scss/special/_scss-config.scss"
}
],
"stylePreprocessorOptions": {
"includePaths": [
"src/scss/default"
]
}
}
}
}
main.ts
import { environment } from './environments/environment.default';
console.log(environment.name); // 'special' --> replacement works!
<小时>
结果:.ts 文件的文件替换有效，但不适用于 .scss 文件，因为特殊的调试语句永远不会被调用，但默认情况下，即使文件应该被重新分配.
Result:
File replacement for .ts files works, but not for .scss files, as the special debug statment never gets called, but the default does, even the file should have been repalced.
推荐答案
Angular.io 声明:
Angular.io states that:
主 CLI 配置文件 angular.json [...] 允许您将任何文件替换为该文件的特定目标版本.
The main CLI configuration file, angular.json, [...] allows you to replace any file with a target-specific version of that file.
这实际上是愿景，但根据这个 GitHub 线程，目前情况并非如此.
到目前为止，似乎只支持 .ts 和 .html 文件.
This is in fact the vision, but according to this GitHub thread, this is not true for now.
It seems up till now, only .ts and .html files are supported.
因此，目前问题的答案是否定的，尚无法替换 SCSS 文件.
Therefore, currently the answer to the question is no, it is yet not possible to replace SCSS files.
2021 年 1 月更新: 仍然无效.使用 Angular 11.0.9 测试.
Update Jan-2021: Still doesn't work. Tested with Angular 11.0.9.
TLDR:
如果您尝试使用文件替换功能，Angular 11.x 现在会在不受支持的文件类型上出错
(下面描述的解决方法仍然有效，因为它不使用文件替换功能)
Angular 11.x now errors on unsupported file types if you try to use the file replacement feature
(the workaround described below still works, as it doesn't use the file replacement feature)
它只支持以下类型的文件替换:.cjs、.js、.json、.mjs 和 .ts
It only has file replacement support for the following types: .cjs, .js, .json, .mjs and, .ts
背景:
文档中支持所有文件类型的初始语句似乎是错误的.Angular 11 引入了一项检查，以检查不受支持的文件类型.
Background:
It seems the inital statement in the documentaion to support all file types was wrong. With Angular 11 a check was introduced, to error on unsupported file types.
fix(@angular-devkit/build-angular):添加验证文件替换...
fileReplacement 旨在用构建中的其他编译源文件替换编译源文件(JavaScript 或 TypeScript).通过此更改，我们添加了验证以在文件具有不受支持的扩展名时使构建失败.
fileReplacement is meant to replace compilation source files (JavaScript or TypeScript) with other compilation source files in the build. With this change we add validation to fail the build when the files have unsupported extensions.
因此，在 Angular 11 中，有两件事发生了变化.首先你必须使用src 和replaceWith 而不是replace 和with.尽管这无济于事，因为您将获得 Data path ".fileReplacements[1].replace";应该匹配模式\.(([cm]?j|t)sx?|json)$".，如果你使用 不支持的文件类型，例如 .scss.
So with Angular 11 two things changed. At first you have to use src and replaceWith instead of replace and with. Though this doesn't help as you will get Data path ".fileReplacements[1].replace" should match pattern "\.(([cm]?j|t)sx?|json)$"., if you use unsupported file types like .scss.
2020 年 2 月更新:仍然无效.使用 Angular 9.0.0 测试.
Update Feb-2020: Still doesn't work. Tested with Angular 9.0.0.
但有一个解决方法:
您可以在 angular.json 中使用不同的配置来实现相同的目标 - 替换一个 SCSS 文件.
But there is a workaround:
You can use different configurations in angular.json to achieve the same goal - replacing a SCSS file.
文件夹结构:
src/
scss/
default/
_scss-config.scss
special/
_scss-config.scss
src/scss/default/scss-config.scss
body { background-color: blue; }
src/scss/special/scss-config.scss
body { background-color: red; }
angular.json
<!-- language: lang-json -->
{
[...]
"architect": {
"build": {
"options": {
"stylePreprocessorOptions": {
"includePaths": [
"src/scss/default"
]
}
},
"configurations": {
"default": {
"stylePreprocessorOptions": {
"includePaths": [
"src/scss/default/"
]
}
},
"special": {
"stylePreprocessorOptions": {
"includePaths": [
"src/scss/special/"
]
}
}
}
},
"serve": {
"configurations": {
"default": {
"browserTarget": "angular-scss-replacement:build:default"
},
"special": {
"browserTarget": "angular-scss-replacement:build:special"
}
}
}
[...]
}
}
style.scss 或 component.scss
@import 'scss-config';
/* use your SCSS variables and stuff as you normally would */
请注意，导入语句中不得包含文件名中的 _(下划线)
(有关更多详细信息，请阅读部分部分)
Note that you mustn't include the _ (underscore) from the filename in the import statement
(for more details read the Partials section)
如何使用:
// 'ng serve'-command uses default configuration as defined in angular.json > build
ng serve
// default config creates blue background
ng serve --configuration=default
// specail config create red background
ng serve -c=special
(这个解决方案来自上面提到的线程 - thx to richardtreier)
这种方法的缺点:
- 它强制您使用特定的文件夹结构来分隔不同的 SCSS 配置
- 这可能会迫使您将这些文件夹移出正常的文件夹结构.
例如，"includePaths": ["src/scss"]不适用于上述文件夹结构，因为无法单独加载 SCSS 配置.
- It forces you to have a specific folder structure to separate your different SCSS configurations
- It might force you to move those folders out of your normal folder structure.
For example,"includePaths": ["src/scss"]won't work with the folder structure mentioned above, since the SCSS configs can't be loaded separately.
这篇关于如何用 Angular CLI 替换 SCSS 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
