Как я могу добавить пространство имен ко всем моим файлам .less в проекте?

Question

Я работаю с двумя веб-приложениями в одном репозитории, и мне нужен способ «пространства имен» имен классов CSS для каждого приложения.

Я использую LESS в качестве препроцессора стиля и использую webpack для объединения всех файлов LESS в один файл .css, который затем загружается на веб-страницу с помощью HTML.

В настоящее время я вручную добавляю к каждому классу CSS свое пространство имен следующим образом:

// mylessfile.less
.nmsp {
  &__some-class-name {
     color: blue;
  }
}

это раздражает и не очень ремонтопригодно.

Хотелось бы что-нибудь подобное этой шкале?:

// global.less
@my_namespace="nmsp";

// mylessfile.less
@import "global.less";
@my_namespace {
  &__some-class-name {
     color: blue;
  }
}

Есть ли способ сделать это через LESS или даже через Webpack?

В идеале я хотел бы использовать пространство имен для app1, app2 и "общее" пространство имен стилей для всех стилей, которые разделяют оба приложения.

Answer 1

Webpack поддерживает Модули CSS в качестве области действия приложения. Использование CSS-модулей также поможет вам получить пространство имен.

В вашей конфигурации веб-пакета:

{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}

Материал внутри [ ] должен быть настроен для вашего приложения.

Вот репо демо-проекта 1012 *

Answer 2

SASS и LESS поддерживают пространство имен из коробки.

.app1-styles {
  @import (app1) url("app1.css");
}