Импортировать глобальные переменные в less-loader - PullRequest
Новая
       32

Импортировать глобальные переменные в less-loader

0 голосов
/ 29 августа 2018

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

С помощью sass-loader вы можете предоставить следующую опцию: 

loaderOptions: {
    data: "@import 'globals.sass'"
}

Единственный вариант, который я мог найти с помощью менее загружаемого файла, - это globalVars: 

loaderOptions: {
    globalVars: {}
}

Теперь, это работает хорошо, но globalVars ожидает объект с парой ключ-значение. Я предпочел бы иметь theme.less где-нибудь, который добавляется с каждым компонентом. Это возможно с менее загруженным?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Вот как я делаю: 

rules: [{
    test: /\.less$/,
    use: [{
        loader: 'less-loader',
        options: {
            javascriptEnabled: true
        }
    },
        {
            loader: 'style-resources-loader',
            options: {
                patterns: [
                    path.resolve(__dirname, 'src/application/less/variables.less'),
                    path.resolve(__dirname, 'src/application/less/flex.less'),
                    path.resolve(__dirname, 'src/application/less/functions.less'),
                ]
            }
        }]
}]
0 голосов
/ 06 февраля 2019

Я предлагаю объединить ваши less-loader с text-transform-loader, например: 

rules: [{
     test: /\.js$/,
     use: [
         { 
            loader: 'less-loader',
            options: //your normal options
         },
         { 
            loader: 'text-transform-loader',
            options: {
               prependText: '@import "../styles/theme.less"'
            }
         }
     ]
}]

Помните, что последний загрузчик веб-пакетов применяется первым, поэтому вы, вероятно, захотите использовать его как последний загрузчик в вашей цепочке. Это может сломаться, если ваши меньшие файлы будут вложены на разной глубине, потому что тогда ваш файл темы будет на разной глубине относительно каждого. Если это так, вы можете просто добавить все содержимое файла темы в каждый файл меньше!

Также было бы неплохо исключить файл theme.less из этого правила, иначе вы можете получить какую-то странную бесконечную рекурсию.

Подробнее см. https://github.com/kmck/webpack-text-transform-loader.

...