使用 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>
的值是多少?
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?