Использование переменных LESS в реактивном проекте с файлами .less, импортированными компонентами - PullRequest
Новая
       14

Использование переменных LESS в реактивном проекте с файлами .less, импортированными компонентами

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

Я в реактивном проекте, скомпилирован с использованием веб-пакета и использую меньше. Корень приложения импортирует styles.less верхнего уровня, который импортирует variables.less, который определяет кучу переменных LESS.

Существует также каталог components, который имеет несколько папок, каждая папка имеетstyles.less и index.jsx, который его импортирует.

В настоящий момент, если я пытаюсь получить доступ к переменным из компонентов (например, Card/styles.less), я получаю ошибку «Переменная [x] не определена».

Есть ли способ сделать эти переменные «глобально доступными» для всех без исключения в проекте?

Версии:

  • Реакция 16,7
  • webpack 4.28
  • babel 7.5
  • меньше 3.9
  • менее загружено 5.0

webpack config 

   module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            modifyVars: { // this modifies the antd variables
                                'primary-color': '#5c31a8',
                                'border-radius-base': '2px'
                            },
                            javascriptEnabled: true
                        }
                    }
                ]
            }
        ]
    },

1 Ответ

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

Короче говоря, для этого есть библиотека: https://www.npmjs.com/package/less-vars-to-js.

Обратите внимание, что существуют способы экспорта переменных SASS и CSS в JS. Я не смотрел, как работает LESS, так что вы можете попробовать тоже.

SASS: https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

CSS: https://css -tricks.com/updating-a-css-variable-with-javascript/

...