: селектор хоста не превращается в компонентную сущность при использовании веб-пакета в Angular 5 - PullRequest
Новая
       7

: селектор хоста не превращается в компонентную сущность при использовании веб-пакета в Angular 5

0 голосов
/ 17 мая 2018

Итак, во-первых, я запускаю angular с настроенным webpack https://angular.io/guide/webpack#configuring-webpack и настроил sass-загрузчик webpack. Он отлично работает, за исключением одной вещи, с которой я столкнулся сегодня:

app.component.ts 

@Component({
    selector: 'ng-app',
    templateUrl: './app.component.html',
    styleUrls: [
        './app.component.scss'
    ]
})

app.component.scss 

:host {
    background: #f99d1c;
}

Выходной HTML-код: 

<style type="text/css">
:host { // but should be [_nghost-c0]
  background: #f99d1c; 
}
</style>

Проблема: Плагин sass для Webpack передает scss в css, но не преобразует псевдоселекторы: host,: host-context в компоненты компонента.

Я не нашел никаких плагинов для веб-пакетов, но исследовал, как он работает с теневым компилятором. https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts И я полагаю, angular-cli использует этот компилятор.

Вопрос: Есть идеи, как работать со стилями angular-cli, как это делает angular-cli?

Заранее спасибо.

UPD:

webpack.config.js 

        {
            test: /\.scss$/,
            use: [{
                loader: 'to-string-loader'
            }, {
                loader: 'css-loader'
            }, {
                loader: 'sass-loader'
            }]
        }

FIX:

После использования ng eject в начальном проекте я получил правило webpack ниже, и оно работает как положено ([_nghost-c1] вместо :host в выходных css) 

        {
            'test': /\.scss$|\.sass$/,
            'use': [
                'exports-loader?module.exports.toString()',
                {
                    'loader': 'css-loader',
                    'options': {
                        'sourceMap': false,
                        'importLoaders': 1
                    }
                }, {
                    'loader': 'postcss-loader',
                    'options': {
                        'ident': 'postcss'
                    }
                }, {
                    'loader': 'sass-loader',
                    'options': {
                        'sourceMap': false,
                        'precision': 8,
                        'includePaths': []
                    }
                }
            ]
        },

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Ну, на самом деле вы можете заменить все CSS-селекторы: host именами их компонентов. поэтому вместо :host {} вы можете иметь my-component {}.

Попробуй

0 голосов
/ 22 мая 2018

Вместо настройки собственного веб-пакета вы можете использовать функцию ng eject для извлечения файла веб-пакета. Это будет хорошо работать.

Кстати, вы можете просмотреть этот файл и посмотреть, чем он отличается от вашего.

...