3

我即将创建可嵌入的应用程序，可以在基本级别上为每个客户端设置样式（主要是颜色）。

我的想法是使用嵌入的一些查询参数，如下所示：<iframe src="embeddedApplication?theme=client_1"/>然后读取查询参数并在基础之上请求适当的样式。一切都好，简单的柠檬汁。

我没有预见到的是，webpack 配置会如此痛苦。我习惯了 vue-cli，我宁愿坚持使用它（这可能意味着 webpack-chain，但这不是问题）至少想保留它的 webpack 配置并扩展它。

理想情况下，我想创建client_1.scss等client_2.scss只包含 scss 变量。然后我（理想情况下）会以某种方式让 webpack 循环遍历所有.vue文件（就像通常那样），然后为每个client_N.scss文件重复循环，解决从该文件导入的设置。

视觉上：

src
|--themes
|  |-- client_1.scss
|  |-- client_2.scss
|
|--components
   |-- comp_A
   |-- comp_B

dist
|--client_1.css /* comp_A + comp_B with variables from client_1.scss
|--client_1.css /* comp_A + comp_B with variables from client_2.scss

我已经尝试了很多，但我没有设法接近这个。我最接近的是生成两种不同的样式（添加*.scss入口点）。但是我只是在写全局样式。

有没有人有任何想法？非常感谢！

更新

目前我正在加载多个包含 scss 变量的 JSON 文件（听起来有点好笑，我知道；这就是这种方式@epegzz/sass-vars-loader），因此 scss 变量在 vue 单文件组件中得到正确解析。

chainWebpack: config => {
    const files = fs.readdirSync('./src/assets/themes/');

    files.forEach(file => {
        config.module.rule('scss').oneOf('vue')
            .use('sass-vars-loader')
            .loader('@epegzz/sass-vars-loader')
            .options({
                syntax: 'scss',
                files: [
                    path.resolve(__dirname, `src/assets/themes/${file}`)
                ]
            })
    });
}

这一切都很好，但原来的问题实际上并没有解决。我的 forEach 循环确实包含所有文件，但仍然只有一个 css output。

如果我只能再次“重复”整个构建过程......？

4

0 回答 0