Webpack перехватывает для динамического изменения импорта SCSS - PullRequest
Новая
       36

Webpack перехватывает для динамического изменения импорта SCSS

2 голосов
/ 22 октября 2019

Вопрос

РЕДАКТИРОВАТЬ: пользовательские импортеры для sass-loader кажутся наиболее вероятными?

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

@import 'bootstrap/scss/function';

На

@import '~bootstrap/scss/function';

Я пытался с конвейером разрешения, но безрезультатно: 

plugins: [
    {
        apply: resolver => {
            resolver.hooks.parsedResolve.tap('resolve', (request, resolveContext, callback) => {
                webpackUtils.handleLegacyImports(request, resolveContext, resolver, callback);
            });
        },
    },
],

Но также было интересно, могу ли я подключиться к sass-загрузчику, документация скудная.

Context

Так что этоэто неудачный рабочий сценарий, в котором я импортирую файлы SCSS из подмодуля git, чтобы я мог делать переопределения, он имеет следующую структуру: 

-Project
--MyApp
---scss
----global.scss
--SubmoduleApp
---scss
----global.scss

Проблема в том, что подмодуль плохо спроектирован и неНе используйте Tilde для какого-либо импорта, вместо этого у него есть собственный скрипт сборки, чтобы определить импорт. Как и ожидалось, веб-пакет выходит из строя, когда он достигает их 

ERROR in ./MyApp/scss/global.scss
Module build failed ...
SassError: File to import not found or unreadable: bootstrap/scss/functions.
        on line 1 of ...
>> @import "bootstrap/scss/functions";

Добавление тильды в подмодуль устраняет проблему, но не является решением, поскольку подмодуль является сторонним и не может быть обновлен. Вот почему мне нужно подключиться, прежде чем пытаться импортировать, чтобы добавить тильду или что-то еще, чтобы сделать эту работу ... Любые мысли будут оценены!

1 Ответ

0 голосов
/ 22 октября 2019

Пользовательский импортер в Sass-Loader был ответом на все!

Вот краткий пример обработки крайнего случая: 

{
    loader: 'sass-loader',
    options: {
        sourceMap: process.env.NODE_ENV !== 'production',
        sassOptions: {
            importer: url => {
                if (url.startsWith('bootstrap/')) {
                    return {
                        file: path.resolve(`./node_modules/${url}`),
                    };
                }
                return null;
            },
        },
    },
},
...