什么是css模块化？css模块化的完成方法

在 welcome.js 中便可如下加载（使用“导出为 js 对象”的 css 模块化）：

import styles from './welcome.css';
import image1 from './images/1.jpg';
其实，还有另外一种思路，就是将 css 内置 js 中，成为 js 的一部分。
这样做的目的，一是 css 的模块化，二是直接绑定到组件上。
比如，material-ui、styled-jsx、jss、vue style scoped 便是使用的这种方式。
这种方式的实现有很多种，这里主要介绍一下 styled-jsx。
3.1 styled-jsx
styled-jsx 的原理是根据当前文件的位置、内容生成一个全局唯一的标识，然后把这个标识追加到组件每一个元素上，每一个样式选择器上，达到模块化的目的。
可以参考官方文档，查看详细的用法，我在这里给个例子：
3.1.1 安装工具（babel 转码所需）
npm install --save styled-jsx
3.1.2 配置 babel plugins（如 .babelrc）
{
  "plugins": [
    "styled-jsx/babel"
  ]
}
3.1.3 添加源文件代码
hello.js
export default () => (
    <div className={'container'}>
        <p className={'hello'}>Hello! Hello!</p>
        <div id={'hi'}>Hi!</div>
        <style jsx>{`
          .container {
            color: blue;
          }
          p:first-child {
            color: red;
          }
          .hello {
            color: yellow;
          }
          #hi {
            color: green;
          }
        `}</style>
    </div>
)
3.1.4 转码
babel path/to/hello.js -d target/dir
转码后的文件
import _JSXStyle from 'styled-jsx/style';
export default () => (
    <div className={'jsx-234963469' + ' ' + 'container'}>
        <p className={'jsx-234963469' + ' ' + 'hello'}>Hello! Hello!</p>
        <div id={'hi'} className={"jsx-234963469"}>Hi!</div>
        <_JSXStyle styleId={"234963469"} css={".container.jsx-234963469{color:blue;}p.jsx-234963469:first-child{color:red;}.hello.jsx-234963469{color:yellow;}#hi.jsx-234963469{color:green;}"} />
    </div>
);
3.1.5 运行
实际渲染效果
<style type="text/css" data-styled-jsx="">
.container.jsx-234963469{
  color:blue;
}
p.jsx-234963469:first-child{
  color:red;
}
.hello.jsx-234963469{
  color:yellow;
}
#hi.jsx-234963469{
  color:green;
}
</style>
<div class="jsx-234963469 container">
  <p class="jsx-234963469 hello">Hello! Hello!</p>
  <div id="hi" class="jsx-234963469">Hi!</div>
</div>
以上就是本篇文章的全部内容了，更多css相关内容请关注php中文网的css教程栏目。
以上就是什么是css模块化？css模块化的实现方法的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：啥是css模块化？css模块化的完成办法