CSS模块和多个布局/主题？ [英] CSS Modules and multiple layouts/themes?

问题描述

在我的应用程序中，我有多个主题样式（您可以将它们视为不同的单独CSS样式文件）。我想开始使用CSS模块，但我甚至不知道如何 import 我的第一个文件。

<让我们假设以下（简单）目录结构：

  layouts / 
 themeA / 
 myComponent。 css 
 themeB / 
 myComponent.css 
 themeC / 
 myComponent.css 
 components / 
 myComponent.js 
  

根据用户设置，我想挑选不同的CSS。这在浏览器（或服务器）上很容易实现。但是，我怎样才能将myComponent.css包含到myComponent.js中呢？

根据CSS模块，我应该 import 我正在使用的文件。所以从'theme / myComponent.css 导入样式。问题是我没有一个真正的主题，但有3个不同的并行主题。

 从''/ /<<<<从何而来？ 
 
 return`< div class = $ {styles.caption>< / div>`
  

使用CSS模块时，甚至可以使用多个布局/主题？ 一个文件中的所有3个主题。您可以轻松选取其中的一个并使用它来渲染组件。您必须对所有 .css 主题具有相同的架构，例如：

  .wrapper {
 //示例内容
} 
 
 .image {
 //示例内容
} 
  b 
 $ b 
在 myComponent.js 中，您将导入所有主题并将其分配给对象（它会更容易挑选其中一个）：
 从'./themeA.css'导入themeA; 
从'./themeB.css'导入themeB; 
从'./themeC.css'导入themeC; 
 
 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> / p> 
< / div> 
`）; 
}; 
  
我只是为了简化模型而使用了jQuery。 
您可以在这里看到所有的工作代码： 
 
 
 
 在这里您可以检查新的代码，它甚至会显示ajax下载块 - 您可以在控制台中尝试。  
In my application, I have multiple theme styles (you can think of them as different, separate CSS styles files). I would like to start using the CSS modules, but I don't know even how to import my first file.

Lets assume the following (simple) directory structure:
layouts/
    themeA/
        myComponent.css
    themeB/
        myComponent.css
    themeC/
        myComponent.css
components/
    myComponent.js
Depending on the user settings, I would like to pick a different CSS. That's easy to do in the browser (or on the server). But how can I include myComponent.css into myComponent.js? 

According to CSS modules, I should import the file I'm using. So import styles from 'theme/myComponent.css. The problem is that I don't have one true theme, but 3 different, parallel themes.
import styles from '' // <<<< from what?

return `<div class=${styles.caption></div>`
Is it even possible to work with multiple layouts/themes when using CSS modules?
解决方案
If you bundle all 3 themes in one file. You can easily pick one of them and render component with it. You must have the same schema for all .css themes, for example:
.wrapper {
  // example content
}

.image {
  // example content
} 
In myComponent.js you will import all themes and assign to object (it will be easier to pick one of them): 
import themeA from './themeA.css';
import themeB from './themeB.css';
import themeC from './themeC.css';

const themes = {
  light: themeA,
  dark: themeB,
  pink: themeC
}
Your themes will look something like this:
{ 
    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"
    }
}
Since css-modules are simple object with pointer to new class names you can dynamically pick one of them:
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>
  `);
};
I used jQuery only for simplicity of mockups.
You can see all working code here: webpackbin 



Load styles asynchronously in runtime (edit)

If you use require.ensure (great explanation here) you can download style in runtime.
Change myComponent.js to async require:
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 will produce this chunks (1 main and 3 with styles):
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]
I will prove that 3 chunks with styles contain your theme styles. 
For example chunk 1 contains this code inside (I'm showing only important part of it):
/***/ },
/* 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"
    };
How it looks in runtime



Here you can check new code it will even show ajax download chunks - you can try in console. 

                        
这篇关于CSS模块和多个布局/主题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！