使用Angular 7 + Webpack 4封装的css

Question

我有一个带有Angular 1.x和Angular 7路线的hybrid环境。 Angular 1.x路由使用旧的bootstrap 3，而Angular 7应该使用bootstrap 4.我试图通过导入它来封装Bootstrap 4仅用于Angular 7路由

@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读取未定义的属性'replace'（C：\ Users ... \ RequestShortener.js ：16：17）在Compiler上的新编译器（C：\ Users \ r \ n，\ Compiler.js：185：27）处新的RequestShortener（C：\ Users ... \ RequestShortener.js：26：15）。在Object.pitch（C：\ Users ..）的Compilation.createChildCompiler（C：\ Users ... \ Compilation.js：2494：24）处创建了一个createChildCompiler（C：\ Users ... \ Compiler.js：508：25）。 。\ 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样式。

Helpppp

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'],
})