相关疑难解决方法(0)

我正在尝试使React应用程序成为主题.目前,主题仅包含不同的Sass变量集,这些变量定义了不同的标题颜色等.

根据我目前的理解,这ExtractTextPlugin似乎是我最好的选择,因为我不希望我的样式被内联,而是每个主题都有单独的文件.

所以我创建了两个主题:

src/scss/themes/theme-a.scss
src/scss/themes/theme-b.scss

主题导入基本布局和常用样式并覆盖相关变量.

但我设法让webpack为这两个主题创建单独的css文件的唯一方法是为我的每个主题创建不同的入口点webpack.prod.config:

entry: {
  app: './src/js/init.js',
  theme-a: './src/scss/themes/theme-a.scss',
  theme-b: './src/scss/themes/theme-b.scss'
},

但是为每个新添加的主题添加新的入口点会感觉不对,我认为必须有更好的方法吗？

我有多个主题文件,基本上是SASS文件,具有不同的变量,指定特定于每个主题的颜色,字体等.项目中的其余SASS文件在其CSS规则中使用这些变量.

我想以这样的方式配置webpack,它将为每个主题文件生成1个CSS文件.

例如:

main.scss:

body {
  background-color: $theme-specific-color;
}

theme1.scss:

$theme-specific-color: blue;

theme2.scss:

$theme-specific-color: green;

所需的配置将输出2个CSS文件:

theme1.css:

body {
  background-color: blue;
}

theme2.css:

body {
  background-color: green;
}

我目前正在使用ExtractTextPlugin将样式表提取到CSS中.

我使用 webpack 作为构建工具，而不是作为我应用程序中的 css 预处理器。

我有一个 less 文件variable.less，其中包含整个站点的颜色、大小等一般值，然后不同的组件需要不同的 less，它们使用在variable.less

现在我们需要为网站创建多个主题，我不知道如何开始，有什么建议吗？