Инкапсулированный CSS с Angular 7 + Webpack 4 - PullRequest
Новая
       31

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

1 голос
/ 13 марта 2019

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

, но затем загрузчик 4 переопределяет bootstrap 3 класса и ломает мой стиль Angular 1.x.

Helpppp

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

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

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

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

0 голосов
/ 13 марта 2019

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

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