Переопределить угловые загрузчики для определенных файлов - PullRequest
Новая
       27

Переопределить угловые загрузчики для определенных файлов

0 голосов
/ 03 июня 2019

У нас есть кодовая база, созданная с использованием angular, которая использует angular cli и ее конфигурацию по умолчанию для webpack.Тем не менее, мы начинаем отходить от угловых и в сторону веб-компонентов.Чтобы использовать scss в наших ts-файлах веб-компонента, мы создали новый загрузчик веб-пакетов, в который добавляем правильный scss-файл в качестве зависимости, ждем скомпилированный css из sass-loader и вставляем его в наш ts-файл, используя строку replace.

Это нормально работает в обычной среде веб-пакетов.Однако angular также обрабатывает файлы scss, используя несколько разных загрузчиков.Из-за этого файл scss больше не содержит фактического scss, а содержит javascript.Это все еще необходимо для других наших файлов scss, но не для тех, которые заканчиваются на .webcomponent.scss.

Как я могу сказать angular прекратить использование загрузчиков по умолчанию для моих файлов * .webcomponent.scss?

Мой extra-webpack-config.js выглядит следующим образом: 

module.exports = {
    module: {
        rules: [
            {
                test: /\.webcomponent\.ts$/,
                use: [
                    {
                        loader: './webcomponent-loader.js'
                    }
                ]
            },
            {
                test: /\.webcomponent\.scss$/,
                use: [
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};

А мой angular.json имеет следующую пользовательскую конфигурацию веб-пакета: 

"customWebpackConfig": {
    "path": "./extra-webpack.config.js",
    "mergeStrategies": {
        "module": "prepend",
        "loaders": "replace"
    }
}

Внутри веб-компонента-Загрузчик, который я использую 

this.addDependency(this.resourcePath.replace(/.ts$/, '.scss'));

Это дает мне следующую ошибку: 

Invalid CSS after "module.exports": expected selector, was '= "/*Colors*/\\n/*Bl'

Это говорит мне об угловом преобразовании его в код js.Любая помощь с благодарностью.

1 Ответ

0 голосов
/ 03 июня 2019

В конце концов мне удалось переопределить загрузчики по умолчанию, используя следующий файл extra-webpack.config.js: 

const webpack = require('webpack');
const pkg = require('./package.json');

module.exports = (config, options) => {
    config.module.rules.forEach(rule => {
        if (rule.test.exec('.scss')) {
            rule.test = new RegExp('(?<!\.webcomponent)(' + rule.test.source + ')');
        }
    });

    config.module.rules.push({
        test: /\.webcomponent\.ts$/,
        use: [
            {
                loader: './webcomponent-loader.js'
            }
        ]
    },
    {
        test: /\.webcomponent\.scss$/,
        use: [
            {
                loader: './identity-loader.js'
            },
            {
                loader: 'sass-loader'
            }
        ]
    });

    return config;
};

В основном я беру старую конфигурацию и редактирую тестовое регулярное выражение, чтобы использовать отрицательный вид, чтобы исключитьмои файлы.Затем я добавляю свои собственные загрузчики в правила конфигурации.У меня все еще есть проблемы с получением моего css, но это еще одна проблема, для которой я опубликую новый вопрос.

...