angular - 使用 Angular 7 + Webpack 4 封装 css

Question

我有一个包含 Angular 1.x 和 Angular 7 路由的混合环境。Angular 1.x 路由使用旧的 bo​​otstrap 3，而 Angular 7 应该使用 bootstrap 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) 在新的 Compiler (C:\Users\r...\Compiler.js:185:27) 在 Compiler。在 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 样式。

帮助ppp

Answer 1

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

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

你为什么首先需要这个？

Answer 2

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

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