Question

我正在同一存储库中使用两个Web应用程序，并且需要一种“命名空间”每个应用程序的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

SASS和LESS都支持开箱即用的命名空间。

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

Answer 2

Webpack支持CSS Modules作为范围应用程序的一种方式。使用CSS模块也可以命名空间。

在您的webpack配置中：

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

[ ]中的内容应根据您的应用进行自定义。