使用 Angular 7 + Webpack 4 封装 css

Posted

技术标签:

【中文标题】使用 Angular 7 + Webpack 4 封装 css【英文标题】:Encapsulated css with Angular 7 + Webpack 4 【发布时间】: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 样式。

帮助

【问题讨论】:

【参考方案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。

以上是关于使用 Angular 7 + Webpack 4 封装 css的主要内容,如果未能解决你的问题,请参考以下文章

Ag-grid 不会在 JHipster 应用程序中呈现(Angular 7 + Webpack 4)

使用 @ngtools/webpack 在 Angular 11 + Webpack 4 中实现 AOT

Angular5 webpack ReferenceError:未定义窗口

使用 Angular 4+ 版本时,是不是有任何专业人士可以用 Parcel 替换 Webpack?

Angular 4 CLI,WebPack,为整个网站动态切换引导主题

IE11 上的 Webpack + Angular(4) + ES6 不起作用