使用 Angular 7 + Webpack 4 封装 css答案

【问题标题】：Encapsulated css with Angular 7 + Webpack 4使用 Angular 7 + Webpack 4 封装 css
【发布时间】：2019-08-03 22:56:01
【问题描述】：

我有一个带有 Angular 1.x 和 Angular 7 路由的 hybrid 环境。 Angular 1.x 路由使用旧的引导程序 3，而 Angular 7 应该使用引导程序 4。我尝试通过导入仅为 Angular 7 路由封装 bootstrap 4

@import "../../../node_modules/bootstrap/scss/bootstrap.scss";

组件内部

styles: [`    
    @import '../../../node_modules/bootstrap/dist/css/bootstrap.css';
  `]

但我不断得到

模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： TypeError：无法读取未定义的属性“替换” 在 normalizeBackSlashDirection (C:\Users...\RequestShortener.js:16:17) 在新的 RequestShortener (C:\Users...\RequestShortener.js:26:15) 在新的编译器 (C:\Users\r...\Compiler.js:185:27) 在 Compiler.createChildCompiler (C:\Users...\Compiler.js:508:25) 在 Compilation.createChildCompiler (C:\Users...\Compilation.js:2494:24) 在 Object.pitch (C:\Users...\mini-css-extract-plugin\dist\loader.js:70:43) 唯一可行的选择是通过将以下内容添加到组件顶部来直接将 css 导入模块：

import '../../../node_modules/bootstrap/dist/css/bootstrap.css';

但随后 bootstrap 4 会覆盖 bootstrap 3 类并破坏我的 Angular 1.x 样式。

帮助

【问题讨论】：

标签： angular angular7 webpack-4 angular-hybrid

【解决方案1】：

我认为您可以在组件中使用styleUrls: [],。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', '../../node_modules/bootstrap/dist/css/bootstrap.css'],
})

【讨论】：

我得到同样的Cannot read property 'replace' of undefined错误
@RonyFragin index.html中<base>的值是多少？

【解决方案2】：

IMO 你不能同时拥有 3 和 4 而没有冲突。

我有一个包含 Angular 1.x 和 Angular 7 路由的混合环境

你为什么首先需要这个？

【讨论】：

我正在开发一个大型应用程序并逐渐将其升级到 Angular 7。我只想为 Angular 7 代码用 4 覆盖 3。