如果您将所有 3 个主题捆绑在一个文件中。您可以轻松地选择其中之一并用它渲染组件。您必须对所有内容具有相同的架构.css
主题,例如:
.wrapper {
// example content
}
.image {
// example content
}
In myComponent.js
您将导入所有主题并分配给对象(选择其中之一会更容易):
import themeA from './themeA.css';
import themeB from './themeB.css';
import themeC from './themeC.css';
const themes = {
light: themeA,
dark: themeB,
pink: themeC
}
你的主题看起来像这样:
{
light: {
wrapper: "themeA---wrapper---2IVWH",
image: "themeA---image---3omJ7"
},
dark: {
wrapper: "themeB---wrapper---fHfAZ",
image: "themeB---image---17erf"
},
pink: {
wrapper: "themeC---wrapper---2i9L2",
image: "themeC---image---3OKIG"
}
}
由于 css-modules 是带有指向新类名的指针的简单对象,因此您可以动态选择其中之一:
const render = themeName => {
const theme = themes[themeName];
return $(`
<div class="${theme.wrapper}">
<img
class="${theme.image}"
src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png"
/>
<p>Lorem ipsum </p>
</div>
`);
};
我使用 jQuery 只是为了简化模型。
您可以在这里查看所有工作代码:webpackbin http://www.webpackbin.com/NyLP_bTI-
在运行时异步加载样式(编辑)
如果你使用require.ensure
(很好的解释here https://blog.madewithlove.be/post/webpack-your-bags/#code-splitting)您可以在运行时下载样式。
改变myComponent.js
异步要求:
import $ from 'jquery';
const render = (wrapper, theme) => {
const template = $(`
<div class="${theme.wrapper}">
<img
class="${theme.image}"
src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png"
/>
<p>Lorem ipsum </p>
</div>
`);
wrapper.html(template);
};
export default (wrapper, themeName) => {
switch(themeName) { // this will produce 3 chunks with styles
case 'light':
require.ensure([], () => {
render(wrapper, require('./themeA.css'));
});
break;
case 'dark':
require.ensure([], () => {
render(wrapper, require('./themeB.css'));
});
break;
case 'pink':
require.ensure([], () => {
render(wrapper, require('./themeC.css'));
});
break;
}
};
Webpack 将生成以下块(1 个主要块和 3 个带有样式的块):
chunk {0} main.js (main) 267 kB [rendered]
[0] ./src/main.js 827 bytes {0} [built]
[1] ./~/jquery/dist/jquery.js 264 kB {0} [built]
[2] ./src/select.js 440 bytes {0} [built]
[3] ./src/myComponent.js 1.82 kB {0} [built]
chunk {1} 1.1.js 10.2 kB {0} [rendered]
[4] ./src/themeA.css 1.08 kB {1} [built]
[5] ./~/css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!./src/themeA.css 428 bytes {1} [built]
[6] ./~/css-loader/lib/css-base.js 1.51 kB {1} {2} {3} [built]
[7] ./~/style-loader/addStyles.js 7.21 kB {1} {2} {3} [built]
chunk {2} 2.2.js 10.2 kB {0} [rendered]
[6] ./~/css-loader/lib/css-base.js 1.51 kB {1} {2} {3} [built]
[7] ./~/style-loader/addStyles.js 7.21 kB {1} {2} {3} [built]
[8] ./src/themeB.css 1.08 kB {2} [built]
[9] ./~/css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!./src/themeB.css 429 bytes {2} [built]
chunk {3} 3.3.js 10.2 kB {0} [rendered]
[6] ./~/css-loader/lib/css-base.js 1.51 kB {1} {2} {3} [built]
[7] ./~/style-loader/addStyles.js 7.21 kB {1} {2} {3} [built]
[10] ./src/themeC.css 1.08 kB {3} [built]
[11] ./~/css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!./src/themeC.css 432 bytes {3} [built]
我将证明 3 个带有样式的块包含您的主题样式。
例如chunk 1
里面包含这段代码(我只显示了其中的重要部分):
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(6)();
// imports
// module
exports.push([module.id, ".themeA---wrapper---shnYu {\n background-color: #eee;\n color: #333;\n padding: 20px;\n}\n\n.themeA---image---18Mgb {\n float: left;\n height: 100px;\n margin: 20px;\n}\n", ""]);
// exports
exports.locals = {
"wrapper": "themeA---wrapper---shnYu",
"image": "themeA---image---18Mgb"
};
运行时的样子
在这里您可以检查新代码 http://www.webpackbin.com/Vyclm0lwW它甚至会显示 ajax 下载块 - 你可以在控制台中尝试。