Инкапсулированный css с Angular 7 + Webpack 4

У меня есть гибридная среда с маршрутами Angular 1.x и Angular 7. Маршруты 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: невозможно прочитать свойство replace of undefined в 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 переопределяет классы начальной загрузки 3 и нарушает мой стиль Angular 1.x.

Helpppp


angular webpack-4 angular7 angular-hybrid
person Rony Fragin    schedule 13.03.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

ИМО у вас не может быть и 3, и 4 без конфликтов.

У меня гибридная среда с маршрутами Angular 1.x и Angular 7

зачем вам это вообще нужно?

person papatepan    schedule 13.03.2019
comment
Я работаю над большим приложением и постепенно обновляю его до Angular 7. Я хочу заменить 3 на 4 только для кода Angular 7. - person Rony Fragin; 13.03.2019

arrow_upward
0
arrow_downward

Я думаю, что вы можете использовать styleUrls: [], внутри своего компонента.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', '../../node_modules/bootstrap/dist/css/bootstrap.css'],
})
person Josef Katič    schedule 13.03.2019
comment
У меня такая же Cannot read property 'replace' of undefined ошибка - person Rony Fragin; 13.03.2019
comment
@RonyFragin Какое значение имеет <base> в index.html? - person Josef Katič; 13.03.2019
comment
‹Base href = /› - person Rony Fragin; 13.03.2019